https://monsterland.it/assets/themes/flytheme/assets/js/custom/gsap-animation.js

1$ = jQuery;
2
3function getScreenWidth() {
4    return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0;
5}
6
7// Funzione per animare gli elementi dal basso verso l'alto
8function animateFromBottom(selector, $delay = 0) {
9    var elements = $(selector);
10
11    if (elements.length) {
12        gsap.set(elements, { y: 100, opacity: 0 });
13
14
15        ScrollTrigger.batch(elements, {
16            onEnter: batch => gsap.to(batch, {
17                opacity: 1,
18                y: 0,
19                stagger: 0.3,
20                duration: 0.8,
21                delay: $delay,
22            }),
23            start: 'top 80%',
24            end: 'top 60%',
25            scrub: true
26        });
27    }
28}
29// funzione per animare elementi che entrano da destra
30function animateFromRight(selector, $delay = 0) {
31    var elements = $(selector);
32
33    if (elements.length) {
34        // Imposta gli elementi inizialmente a destra e invisibili
35        gsap.set(elements, { x: 100, opacity: 0 });
36
37        ScrollTrigger.batch(elements, {
38            onEnter: batch => gsap.to(batch, {
39                opacity: 1,
40                x: 0,
41                stagger: 0.3,
42                duration: 0.8,
43                delay: $delay
44            }),
45            start: 'top 80%', // L'animazione parte quando l'elemento entra nel viewport
46            end: 'top 50%',
47            scrub: true
48        });
49    }
50}
51function animateFromLeft(selector, $delay = 0) {
52    var elements = $(selector);
53
54    if (elements.length) {
55        // Imposta gli elementi inizialmente a destra e invisibili
56        gsap.set(elements, { x: -100, opacity: 0 });
57
58        ScrollTrigger.batch(elements, {
59            onEnter: batch => gsap.to(batch, {
60                opacity: 1,
61                x: 0,
62                stagger: 0.3,
63                duration: 0.8,
64                delay: $delay,
65            }),
66            start: 'top 80%', // L'animazione parte quando l'elemento entra nel viewport
67            end: 'top 50%',
68            scrub: true
69        });
70    }
71}
72
73// Funzione per animare gli elementi dal basso verso l'alto con opacità se elemento già in viewport
74function animateFromBottomOpacityElementInViewport(selector, $delay = 0) {
75    var elements = $(selector);
76
77    if (elements.length) {
78        gsap.set(elements, { y: 100, opacity: 0 });
79
80        ScrollTrigger.batch(elements, {
81            onEnter: batch => gsap.to(batch, {
82                opacity: 1,
83                y: 0,
84                stagger: 0.15,
85                duration: 0.8,
86                delay: $delay
87            }),
88            start: 'top 90%',
89            end: 'bottom 100%',
90            scrub: true
91        });
92    }
93}
94
95function animateFromBottomOpacity(selector, $delay = 0) {
96    var elements = $(selector);
97
98    if (elements.length) {
99        gsap.set(elements, { y: 100, opacity: 0 });
100
101        ScrollTrigger.batch(elements, {
102            onEnter: batch => gsap.to(batch, {
103                opacity: 1,
104                y: 0,
105                stagger: 0.25,
106                duration: 0.8,
107                delay: $delay
108            }),
109            start: 'top 85%',
110            end: 'top 75%',
111            scrub: true
112        });
113    }
114}
115
116function animateOpacity(selector, $delay = 0) {
117    var elements = $(selector);
118
119    if (elements.length) {
120        gsap.set(elements, { opacity: 0 });
121
122        ScrollTrigger.batch(elements, {
123            onEnter: batch => gsap.to(batch, {
124                opacity: 1,
125                stagger: 0.25,
126                duration: 0.8,
127                delay: $delay
128            }),
129            start: 'top 65%',
130            end: 'top 55%',
131            scrub: true
132        });
133    }
134}
135
136function animateOpacityElementInViewport(selector, $delay = 0) {
137    var elements = $(selector);
138
139    if (elements.length) {
140        gsap.set(elements, { opacity: 0 });
141
142        ScrollTrigger.batch(elements, {
143            onEnter: batch => gsap.to(batch, {
144                opacity: 1,
145                stagger: 0.25,
146                duration: 0.8,
147                delay: $delay
148            }),
149            start: 'top 90%',
150            end: 'bottom 100%',
151            scrub: false
152        });
153    }
154}
155
156// Funzione per animare le parole dal basso verso l'alto con opacità crescente
157function animateWordsFromBottom(selector) {
158    // Avvolge ogni parola in uno span
159    $(selector).each(function() {
160        var words = $(this).text().split(' ');
161        var wrappedWords = words.map(function(word) {
162            return '<span>' + word + '</span>';
163        });
164        $(this).html(wrappedWords.join(' '));
165    });
166
167    var words = $(selector).find('span');
168    gsap.set(words, {y: 100, opacity: 0.25});
169
170    ScrollTrigger.create({
171        trigger: selector,
172        start: 'top 80%',  // Quando l'elemento raggiunge l'80% del viewport
173        end: 'top 10%',  // Termina al 10% del viewport
174        onEnter: () => {
175            gsap.to(words, {
176                opacity: 1,
177                y: 0,
178                stagger: 0.05,  // Velocizza la sequenza
179                duration: 0.4,  // Riduci la durata per renderlo più veloce
180                ease: 'power3.out',
181                overwrite: true  // Assicurati che l'animazione non venga sovrascritta
182            });
183        },
184        scrub: true,  // Controlla lo scorrimento ma lascia spazio alla velocità dell'utente
185        fastScrollEnd: true,  // Forza la fine dell'animazione con scroll rapido
186        markers: false,  // Rimuovi i marker per la produzione
187    });
188}
189
190// funzione per animare una serie di eleenti con intervallo tra di loro (card e blocchi uguali a scacchiera
191function cardAnimation(selector){
192    var elements = $(selector);
193
194    gsap.set(elements, {y:100, opacity:0}

194)
195
196    ScrollTrigger.batch(elements,{
197        onEnter: batch => gsap.to(batch, {opacity:1, y:0, stagger:0.25} ),
198        start: 'top 70%',
199        end: 'top 60%',
200        scrub: true,
201    })
202}
203function cardAnimationSlow(selector){
204    var elements = $(selector);
205
206    gsap.set(elements, {y:100, opacity:0})
207
208    ScrollTrigger.batch(elements,{
209        onEnter: batch => gsap.to(batch, {opacity:1, y:0, stagger:0.5} ),
210        start: 'top 70%',
211        end: 'top 60%',
212        scrub: true,
213    })
214}
215function cardAnimationFast(selector){
216    var elements = $(selector);
217
218    gsap.set(elements, {y:100, opacity:0})
219
220    ScrollTrigger.batch(elements,{
221        onEnter: batch => gsap.to(batch, {opacity:1, y:0, stagger:0.25} ),
222        start: 'top 80%',
223        end: 'top 70%',
224        scrub: true,
225    })
226}
227function h1OpacityFlicker(selector, $delay = 0) {
228    var elements = jQuery(selector);
229
230    if (elements.length) {
231        gsap.set(elements, { opacity: 0 });
232
233        ScrollTrigger.batch(elements, {
234            onEnter: batch => {
235                batch.forEach(el => {
236                    gsap.timeline({ delay: $delay })
237                        .to(el, { opacity: 1, duration: 0.15, ease: "power1.inOut" })   // accende
238                        .to(el, { opacity: 0.2, duration: 0.1, ease: "power1.inOut" }

238)  // spegne rapido
239                        .to(el, { opacity: 0.8, duration: 0.08, ease: "power1.inOut" }) // breve accensione
240                        .to(el, { opacity: 0.1, duration: 0.12, ease: "power1.inOut" }) // di nuovo off
241                        .to(el, { opacity: 1, duration: 0.2, ease: "power2.in" })       // accende più deciso
242                        .to(el, { opacity: 0.5, duration: 0.15, ease: "power1.inOut" }) // piccolo calo
243                        .to(el, { opacity: 1, duration: 0.5, ease: "power4.out" });     // rimane acceso fisso
244                });
245            },
246            start: "top 90%",
247            end: "bottom 100%",
248            scrub: false
249        });
250    }
251}
252
253
254
255// Verifica se esiste la classe passata e chiama l'animazione
256$(document).ready(function() {
257
258    if ($('.animate-from-bottom').length) {
259        animateFromBottom('.animate-from-bottom');
260    }
261    if ($('.animateFromBottom-d05').length) {
262        animateFromBottom('.animateFromBottom-d05',0.5);
263    }
264    if ($('.animate-opacity-zero-to-one-2s').length) {
265        animateOpacityElementInViewport('.animate-opacity-zero-to-one-2s',1.2);
266    }
267    if ($('.animateOpacity').length) {
268        animateOpacity('.animateOpacity',0);
269    }
270    if ($('.animateOpacity-d05').length) {
271        animateOpacity('.animateOpacity-d05',0.5);
272    }
273
274    if ($('.cardAnimationFast').length) {
275        cardAnimationFast('.cardAnimationFast');
276    }
277
278    if ($('.cardAnimationSlow').length) {
279        cardAnimationSlow('.cardAnimationSlow');
280    }
281
282    if ($('.h1-animation-opacity').length) {
283        h1OpacityFlicker('.h1-animation-opacity');
284    }
285    if ($('.hero-homepage-animation').length) {
286        animateFromBottomOpacityElementInViewport('.hero-homepage-animation', 1.2);
287    }
288
289
290    if(getScreenWidth() < 767){
291        if ($('.animateFromBottom-d2').length) {
292            animateFromBottom('.animateFromBottom-d2',0.5);
293        }
294        if ($('.animateFromBottom-d25').length) {
295            animateFromBottom('.animateFromBottom-d25',.75);
296        }
297    }
298
299    if(getScreenWidth() > 767){
300        if ($('.animateFromBottom-d2').length) {
301            animateFromBottom('.animateFromBottom-d2',1.2);
302        }
303        if ($('.animateFromBottom-d25').length) {
304            animateFromBottom('.animateFromBottom-d25',1.2);
305        }
306    }
307});
308