https://www.sarlbernard.com/templates/sarlbernard/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', // [trigger] [scroller] positions
47					end: "bottom top",
48					scrub: 2,
49					toggleActions: 'play reverse play reverse',
50
51				}
52			});
53
54		});
55
56	}
57
58
59
60
61
62
63
64	if ($.jgo.elementExiste('.trigger_clippath1')) {
65
66		const clippath_1 = document.querySelectorAll('.trigger_clippath1');
67		clippath_1.forEach((section) => {
68
69			gsap.to(section, {
70				clipPath: "polygon(0% 0, 100% 0, 100% 100%, 0% 100%)",
71				scrollTrigger: {
72					trigger: section,
73					start: 'top bottom-=100', // [trigger] [scroller] positions
74					scrub: 0,
75					refreshPriority:-1,
76					/* toggleActions: 'play none none reverse', */
77				}
78			});
79		});
80		
81	}
82
83
84	if ($.jgo.elementExiste('.trigger_scale')) {
85
86		const scale_1 = document.querySelectorAll('.trigger_scale');
87		scale_1.forEach((section) => {
88
89			gsap.from(section, {
90				ease: "power1.out",
91				duration: 3,
92				scale:1.4,
93
94				scrollTrigger: {
95					trigger: section,
96					start: "top bottom",
97					end: "bottom 0%",
98					scrub: 0,
99					markers: false
100					/* toggleActions: 'play none none reverse', */
101				}
102			});
103		});
104		
105	}
106
107
108	if ($.jgo.elementExiste('.trigger_scale2')) {
109
110		const scale_2 = document.querySelectorAll('.trigger_scale2');
111		scale_2.forEach((section) => {
112
113			gsap.from(section, {
114				ease: "power1.out",
115				duration: 2,
116				scale:1.2,
117
118				scrollTrigger: {
119					trigger: section,
120					start: "top bottom",
121					end: "bottom 85%",
122					scrub: 0,
123					markers: false
124					/* toggleActions: 'play none none reverse', */
125				}
126			});
127		});
128		
129	}
130	
131	
132
133
134	if ($.jgo.elementExiste('.trigger_parallax2')) {
135		
136		const parallax_21 = document.querySelectorAll('.trigger_parallax2');
137		parallax_21.forEach((section) => {
138
139			let tl = gsap.timeline({
140				scrollTrigger: {
141					trigger: section,
142					start: "top center", // [trigger] [scroller] positions
143					scrub: 0,
144					markers: false,
145					pin: false,
146				},
147			});
148			
149			
150			tl.fromTo(section, {
151				yPercent: -30,
152				scale: 1.1,
153			}, {
154				yPercent: 30,
155				scale: 1.2,
156			})
157
158		});
159		
160	}
161	
162	if ($.jgo.elementExiste('.trigger_parallax3')) {
163			
164		const parallax_31 = document.querySelectorAll('.trigger_parallax3');
165		parallax_31.forEach((section) => {
166	
167			let tl = gsap.timeline({
168				scrollTrigger: {
169					trigger: section,
170					start: "top center", // [trigger] [scroller] positions
171					scrub: 0,
172					markers: false,
173					pin: false,
174				},
175			});
176			
177			
178			tl.fromTo(section, {
179				yPercent: -30,
180				scale: 1,
181			}, {
182				yPercent: 0,
183				scale: 1.2,
184			})
185	
186		});
187		
188	}
189
190
191	if ($.jgo.elementExiste('.trigger_parallax4')) {
192			
193		const parallax_41 = document.querySelectorAll('.trigger_parallax4');
194		parallax_41.forEach((section) => {
195	
196			let tl = gsap.timeline({
197				scrollTrigger: {
198					trigger: section,
199					start: "top center", // [trigger] [scroller] positions
200					scrub: 2,
201					markers: false,
202					pin: false,
203				},
204			});
205			
206			
207			tl.fromTo(section, {
208				yPercent: -10,
209				scale: 1,
210			}, {
211				yPercent: 0,
212				scale: 1.5,
213			})
214	
215		});
216		
217	}
218	
219	
220}
221
222
223