https://www.jagiellonskiecentruminnowacji.pl/wp-content/themes/jci/js/blob.js

1/**
2 * main.js
3 * http://www.codrops.com
4 *
5 * Licensed under the MIT license.
6 * http://www.opensource.org/licenses/mit-license.php
7 * 
8 * Copyright 2018, Codrops
9 * http://www.codrops.com
10 */
11{
12    // From https://davidwalsh.name/javascript-debounce-function.
13	function debounce(func, wait, immediate) {
14		var timeout;
15		return function() {
16			var context = this, args = arguments;
17			var later = function() {
18				timeout = null;
19				if (!immediate) func.apply(context, args);
20			};
21			var callNow = immediate && !timeout;
22			clearTimeout(timeout);
23			timeout = setTimeout(later, wait);
24			if (callNow) func.apply(context, args);
25		};
26    };
27
28    class Blob {
29        constructor(el, options) {
30            this.DOM = {};
31            this.DOM.el = el;
32            this.options = {};
33            Object.assign(this.options, options);
34            this.init();
35        }
36        init() {
37            this.rect = this.DOM.el.getBoundingClientRect();
38            this.descriptions = [];
39            this.opacity = 0;
40            let tmp_path = Array.from(this.DOM.el.querySelectorAll('path'));
41            if (typeof this.options.outro!=="undefined") {
42                this.opacity = 1;
43                tmp_path.splice(-1,1);
44            }
45            this.layers = Array.from(tmp_path, t => {
46                t.style.transformOrigin = `${this.rect.left + this.rect.width/2}px ${this.rect.top + this.rect.height/2}px`;
47                t.style.opacity = this.opacity;
48                this.descriptions.push(t.getAttribute('d'));
49                return t;
50            });
51
52            window.addEventListener('resize', debounce(() => {
53                this.rect = this.DOM.el.getBoundingClientRect();
54                this.layers.forEach(layer => layer.style.transformOrigin = `${this.rect.left + this.rect.width/2}px ${this.rect.top + this.rect.height/2}px`);
55            }, 20));
56        }
57        intro() {
58            anime.remove(this.layers);
59            anime({
60                targets: this.layers,
61                duration: 1800,
62                delay: (t,i) => i*120,
63                easing: [0.2,1,0.1,1],
64                scale: [0.1,1],
65                opacity: {
66                    value: [0,1],
67                    duration: 300,
68                    delay: (t,i) => i*120,
69                    easing: 'linear'
70                }
71            });
72        }
73        outro() {
74            anime({
75                targets: this.layers,
76                duration: 1800,
77                delay: (t,i) => i*120,
78                easing: [0.2,1,0.1,1],
79                opacity: {
80                    value: [1,0],
81                    duration: 300,
82                    delay: (t,i) => i*120,
83                    easing: 'linear'
84                }
85            });
86        }
87        expand() {
88            return new Promise((resolve, reject) => {
89                let halfway = false;
90                anime({
91                    targets: this.layers,
92                    duration: 1000,
93                    delay: (t,i) => i*50 + 200,
94                    easing: [0.8,0,0.1,0],
95                    d: (t) => t.getAttribute('pathdata:id'),
96                    update: function(anim) {
97                        if ( anim.progress > 75 && !halfway ) {
98                            halfway = true;
99                            resolve();
100                        }
101                    }
102                });
103            });
104        }
105        collapse() {
106            return new Promise((resolve, reject) => {
107                let halfway = false;
108                anime({
109                    targets: this.layers,
110                    duration: 800,
111                    delay: (t,i,total) => (total-i-1)*50 + 400,
112                    easing: [0.2,1,0.1,1],
113                    d: (t,i) => this.descriptions[i],
114                    update: function(anim) {
115                        if ( anim.progress > 75 && !halfway ) {
116                            halfway = true;
117                            resolve();
118                        }
119                    }
120                });
121            });
122        }
123        hide() {
124            anime.remove(this.layers);
125            anime({
126                targets: this.layers,

127                duration: 800,
128                delay: (t,i,total) => (total-i-1)*80,
129                easing: 'easeInOutExpo',
130                scale: 0,
131                opacity: {
132                    value: 0,
133                    duration: 500,
134                    delay: (t,i,total) => (total-i-1)*80,
135                    easing: 'linear'
136                }
137            });
138        }
139        show() {
140            setTimeout(() => this.intro(), 400);
141        }
142    };
143
144    window.Blob = Blob;
145
146    const DOM = {};
147    let blobs = [];
148    DOM.svg = document.querySelector('svg.anim-svg');
149    if (DOM.svg!==null) {
150        Array.from(DOM.svg.querySelectorAll('g.blob')).forEach((el) => {
151            const blob = new Blob(el);
152            blobs.push(blob);
153            blob.intro();
154            setTimeout(function () {
155                DOM.svg.classList.add('anim');
156            },1700);
157        });
158        // blobs = [];
159        // setTimeout(function () {
160        //     Array.from(DOM.svg.querySelectorAll('g.blob')).forEach((el) => {
161        //         const blob = new Blob(el, {outro:true});
162        //         blobs.push(blob);
163        //         blob.outro();
164        //     });
165        // },2300);
166    }
167}