https://www.latruffenoire.com/templates/latruffenoire/js/gsap/main.js

1
2/*
3
4	HESITEZ PAS A VOUS SERVIR DE LA DOCUMENTATION
5	https: //greensock.com/cheatsheet/
6
7*/
8
9
10
11
12if ($(window).width() >= 640) {
13
14	if ($.jgo.elementExiste('.trigger_rotation1')) {
15
16		const rotation_1 = document.querySelectorAll('.trigger_rotation1');
17		rotation_1.forEach((section) => {
18
19			gsap.to(section, {
20				rotate: 200,
21				scrollTrigger: {
22					trigger: section,
23					start: 'top bottom-=100', // [trigger] [scroller] positions
24					scrub: 0,
25					toggleActions: 'play none none reverse',
26					// markers: true
27				}
28			});
29
30		});
31
32	}
33
34
35
36
37	if ($.jgo.elementExiste('.trigger_parallax1')) {
38		
39		const parallax_1 = document.querySelectorAll('.trigger_parallax1');
40		parallax_1.forEach((section) => {
41
42			gsap.from(section, {
43				y: 200,
44				scrollTrigger: {
45					trigger: section,
46					start: 'top bottom-=100', // [trigger] [scroller] positions
47					scrub: 0,
48					/* toggleActions: 'play none none reverse', */
49					// markers: true
50				}
51			});
52
53		});
54
55	}
56	
57	
58	if ($.jgo.elementExiste('.trigger_parallax1')) {
59		
60		const parallax_1 = document.querySelectorAll('.trigger_parallax1');
61		parallax_1.forEach((section) => {
62
63			gsap.from(section, {
64				y: 200,
65				scrollTrigger: {
66					trigger: section,
67					start: 'top bottom-=100', // [trigger] [scroller] positions
68					scrub: 0,
69					/* toggleActions: 'play none none reverse', */
70					// markers: true
71				}
72			});
73
74		});
75
76	}
77	
78
79	if ($.jgo.elementExiste(".trigger_parallax_Left")) {
80		const parallax_1 = document.querySelectorAll(".trigger_parallax_Left");
81		parallax_1.forEach((section) => {
82		  gsap.from(section, {
83			x: 200,
84			scrollTrigger: {
85			  trigger: section,
86			  start: "top bottom-=100", // [trigger] [scroller] positions
87			  scrub: 0,
88			  /* toggleActions: 'play none none reverse', */
89			  // markers: true
90			},
91		  });
92		});
93	  }
94	
95	  if ($.jgo.elementExiste(".trigger_parallax_Right")) {
96		const parallax_01 = document.querySelectorAll(".trigger_parallax_Right");
97		parallax_01.forEach((section) => {
98		  gsap.from(section, {
99			x: -100,
100			scrollTrigger: {
101			  trigger: section,
102			  start: "top bottom-=100",
103			  end: "center center+=100",
104	
105			  scrub: 0,
106			  /* toggleActions: 'play none none reverse', */
107			  // markers: true
108			},
109		  });
110		});
111	  }
112	
113	  if ($.jgo.elementExiste(".hori-anim")) {
114		const rotation_1 = document.querySelectorAll(".hori-anim");
115		rotation_1.forEach((section) => {
116		  gsap.from(section, {
117			xPercent: 7,
118			scrollTrigger: {
119			  trigger: section,
120			  start: "top-=800 top",
121			  end: "bottom center",
122			  scrub: 1,
123			  toggleActions: "play none none reverse",
124			  // markers: true
125			},
126		  });
127		});
128	  }
129	
130	  if ($.jgo.elementExiste(".hori-anim2")) {
131		const rotation_1 = document.querySelectorAll(".hori-anim2");
132		rotation_1.forEach((section) => {
133		  gsap.from(section, {
134			xPercent: 10,
135			scrollTrigger: {
136			  trigger: section,
137			  start: "top-=800 top",
138			  end: "bottom center",
139			  scrub: 1,
140			  toggleActions: "play none none reverse",
141			  // markers: true
142			},
143		  });
144		});
145	  }
146
147
148
149	  if ($.jgo.elementExiste('.trigger_parallax03')) {
150    
151		const parallax_03 = document.querySelectorAll('.trigger_parallax03');
152		parallax_03.forEach((section) => {
153	
154		  gsap.from(section, {
155			y: 100,
156			scrollTrigger: {
157			  trigger: section,
158			  start: 'bottom top-=200', // [trigger] [scroller] positions
159			  end: 'bottom center', // [trigger] [scroller] positions
160			  scrub: 0,
161			  refreshPriority: -1,
162			  /* toggleActions: 'play none none reverse', */
163			  // markers: true
164			}
165		  });
166	
167		});
168	
169	  }
170	
171		if ($.jgo.elementExiste('.trigger_parallax3')) {
172		
173		const parallax_3 = document.querySelectorAll('.trigger_parallax3');
174		parallax_3.forEach((section) => {
175	
176		  gsap.from(section, {
177			y: 100,
178			scrollTrigger: {
179			  trigger: section,
180			  start: 'top bottom-=200', // [trigger] [scroller] positions
181			  end: 'top center', // [trigger] [scroller] positions
182			  scrub: 0,
183			  refreshPriority: -1,
184			  /* toggleActions: 'play none none reverse', */
185			  // markers: true
186			}
187		  });
188	
189		});
190	
191	  }
192
193	if ($.jgo.elementExiste('.trigger_clippath1')) {
194
195		const clippath_1 = document.querySelectorAll('.trigger_clippath1');

196		clippath_1.forEach((section) => {
197
198			gsap.to(section, {
199				clipPath: "polygon(0% 0, 100% 0, 100% 100%, 0% 100%)",
200				scrollTrigger: {
201					trigger: section,
202					start: 'top bottom-=100', // [trigger] [scroller] positions
203					scrub: 0,
204					/* toggleActions: 'play none none reverse', */
205				}
206			});
207		});
208		
209	}
210	
211	
212
213
214	if ($.jgo.elementExiste('.trigger_parallax2')) {
215		
216		const parallax_21 = document.querySelectorAll('.trigger_parallax2');
217		parallax_21.forEach((section) => {
218
219			let tl = gsap.timeline({
220				scrollTrigger: {
221					trigger: section,
222					start: "top center", // [trigger] [scroller] positions
223					scrub: 0,
224					markers: false,
225					pin: false,
226				},
227			});
228			
229			
230			tl.fromTo(section, {
231				yPercent: -30,
232				scale: 1.1,
233			}, {
234				yPercent: 30,
235				scale: 1.4,
236			})
237
238		});
239		
240	}
241	
242	
243	
244	/* JavaScript */
245document.addEventListener('DOMContentLoaded', function () {
246	const elements = document.querySelectorAll('[data-scroll-trigger]');
247
248	// Fonction pour évaluer les fonctions GSAP spécifiques dans un objet
249	function evaluateGSAPFunctions(obj) {
250		for (const key in obj) {
251			if (typeof obj[key] === 'string' && obj[key].startsWith('random(')) {
252				const match = obj[key].match(/random\((.*),(.*)\)/);
253				if (match) {
254					const min = parseFloat(match[1]);
255					const max = parseFloat(match[2]);
256					obj[key] = () => gsap.utils.random(min, max); // Remplace par une fonction
257				}
258			}
259		}
260	}
261
262	elements.forEach((element, index) => {
263		const scrollTriggerDataString = element.getAttribute('data-scroll-trigger');
264		let scrollTriggerData;
265
266		try {
267			scrollTriggerData = JSON.parse(scrollTriggerDataString);
268		} catch (e) {
269			console.error("Erreur lors de l'évaluation de data-scroll-trigger:", e);
270			return;
271		}
272
273		// Évalue les fonctions GSAP spécifiques dans les objets 'from' et 'to'
274		evaluateGSAPFunctions(scrollTriggerData.from);
275		evaluateGSAPFunctions(scrollTriggerData.to);
276
277		const scrub = parseFloat(element.getAttribute('data-scroll-scrub') || .2);
278		const stagger = parseFloat(element.getAttribute('data-stagger') || 0);
279
280		let tl = gsap.timeline({
281			scrollTrigger: {
282				trigger: element,
283				start: scrollTriggerData.start,
284				end: scrollTriggerData.end,
285				scrub: scrub,
286				markers: false,
287				pin: false,
288			},
289		});
290
291		tl.fromTo(
292			element,
293			scrollTriggerData.from,
294			scrollTriggerData.to,
295			`+=${index * stagger}`
296		);
297	});
298});
299	
300	
301	
302	
303	
304	
305	
306	
307}