https://www.hbart.fr/templates/hbart/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 
10var w = window.innerWidth;
11
12function moveCursor2(e) {
13  var $cursor1 = $('#mousecursor--small');
14  var elHov = $("[data-hover], a, button, .bt, .bt2, .go, .hov, input, textarea");
15  var bg = ($("body"), $("#mousecursor--small"));
16  w = window.innerWidth;
17  gsap.to($cursor1, {
18	duration: 0.15,
19	delay: 0.05,
20	left: e.clientX,
21	top: e.clientY,
22	ease: "elastic.out(0.1, 0.1)"
23  });
24  // pour les encarts de l'accueil
25  if ($.jgo.elementExiste('#cursor2')) {
26	var el = $(".titre-encart");
27	var $cursor2 = $('#cursor2');
28	gsap.to($cursor2, {
29	  duration: 0.25,
30	  delay: 0.05,
31	  left: e.clientX,
32	  top: e.clientY,
33	  ease: "back.out(2)"
34	});
35	el.on("mouseenter", function () {
36		$($cursor2).addClass("hover")
37	  }).on("mouseleave", function () {
38		$($cursor2).removeClass("hover")
39	  })
40	  $('.titre-encart').mouseover(function () {
41		var mydata = $(this).attr('data-cursor-img');
42		// console.log(mydata);
43		$('#cursor2').css('background-image', 'url(' + mydata + ')');
44	  });
45  }
46  
47  elHov.on("mouseenter", function () {
48	$(bg).addClass("hover")
49  }).on("mouseleave", function () {
50	$(bg).removeClass("hover")
51  })
52
53}
54
55$(window).on('mousemove', moveCursor2);
56$(window).resize(moveCursor2);
57
58
59if ($(window).width() >= 640) {
60
61	if ($.jgo.elementExiste('.trigger_rotation1')) {
62
63		const rotation_1 = document.querySelectorAll('.trigger_rotation1');
64		rotation_1.forEach((section) => {
65
66			gsap.to(section, {
67				rotate: 200,
68				scrollTrigger: {
69					trigger: section,
70					start: 'top bottom-=100', // [trigger] [scroller] positions
71					scrub: 0,
72					toggleActions: 'play none none reverse',
73					// markers: true
74				}
75			});
76
77		});
78
79	}
80	
81	if ($.jgo.elementExiste('.trigger_rotateY2')) {
82		const parallax_rotate2 = document.querySelectorAll('.trigger_rotateY2');
83		parallax_rotate2.forEach((section) => {
84			gsap.set('.trigger_rotateY2', {y:'55px', rotateX:-25, scale:.95, ease: "power1.out", transformPerspective: 900, transformOrigin: "center top"});
85			let tlr2 = gsap.timeline({
86				scrollTrigger: {
87					trigger: section,
88					start: 'top bottom+=100', // [trigger] [scroller] positions
89					end: 'top-=100 ',
90					scrub: .3,
91					markers: false,
92					pin: false,
93				},
94			});
95			
96			tlr2.to(section, {y:'0px',
97				rotateX:0, scale:1, ease: "power1.out", transformPerspective: 900, transformOrigin: "center top"
98				 
99			  })
100		});
101		
102	}
103	
104
105var magnets = document.querySelectorAll('.magnetic') 
106		 var strength = 5 
107		 
108		 magnets.forEach( (magnet) => { 
109		  magnet.addEventListener('mousemove', moveMagnet ); 
110		  magnet.addEventListener('mouseout', function(event) { 
111		   gsap.to( event.currentTarget, {duration: 1, rotateX: '0', rotateY: '0', ease: "power4.out", transformPerspective: 900, transformOrigin: "center center"}) 
112		  } ); 
113		 }); 
114		 
115		 function moveMagnet(event) { 
116		  var magnetButton = event.currentTarget 
117		  var bounding = magnetButton.getBoundingClientRect() 
118		  gsap.to( magnetButton, {
119			duration: 1,
120			rotateX: ((( event.clientY - bounding.top)/magnetButton.offsetWidth) - 0.1) * strength, 
121			rotateY:  ((( event.clientX - bounding.top)/magnetButton.offsetHeight) - 0.1) * strength, 
122		   ease: "power4.out" 
123		  }) 
124		 
125		 
126		 }
127
128 
129	if ($.jgo.elementExiste('.trigger_parallax1')) {
130		
131		const parallax_1 = document.querySelectorAll('.trigger_parallax1');
132		parallax_1.forEach((section) => {
133
134			gsap.to(section, {
135				y: -300,
136				scrollTrigger: {
137					trigger: section,
138					start: 'top top+=300', // [trigger] [scroller] positions
139					scrub: 0,
140					/* toggleActions: 'play none none reverse', */
141					// markers: true
142				}
143			});
144
145		});
146
147	}
148
149
150
151
152
153
154	if ($.jgo.elementExiste('.trigger_clippath1')) {
155
156		const clippath_1 = document.querySelectorAll('.trigger_clippath1');
157		clippath_1.forEach((section) => {
158
159			gsap.to(section, {
160				clipPath: "polygon(0% 0, 100% 0, 100% 100%, 0% 100%)",
161				scrollTrigger: {
162					trigger: section,
163					start: 'top bottom-=100', // [trigger] [scroller] positions
164					scrub: 0,
165					/* toggleActions: 'play none none reverse', */
166				}
167			});
168		});
169		
170	}
171	
172	
173	
174	
175
176
177	if ($.jgo.elementExiste('.trigger_parallax2')) {
178		
179		const parallax_21 = document.querySelectorAll('.trigger_parallax2');

180		parallax_21.forEach((section) => {
181
182			let tl = gsap.timeline({
183				scrollTrigger: {
184					trigger: section,
185					start: "top center", // [trigger] [scroller] positions
186					scrub: 0,
187					markers: false,
188					pin: false,
189				},
190			});
191			
192			
193			tl.fromTo(section, {
194				yPercent: -30,
195				scale: 1,
196			}, {
197				yPercent: 30,
198				scale: 1.05,
199			})
200
201		});
202		
203	}
204	
205	
206	
207}
208
209
210if ($('body').hasClass('prems')) {
211	var splash_logo = $('.splash_logo');
212	var splash = $('.splash_intro');
213	var header = $('header');
214	var ui_logo = $('header #logo');
215	var ui_scroll = $('.fleche-intro');
216	var matrix = $('.matrix');
217	var diapo = $('.anim-diapo');
218	var diapo_scale = $('.diapo_scale');
219	var tl = gsap.timeline();  
220	tl
221	//.set(ui, { display:'none'})
222	.from(splash_logo, {duration: 1.5, opacity:0, yPercent: 350, transform: "matrix(0.99619, 0.08715, 0, 3, 0, 0)", ease: "expo.inOut"  })  // apparition du logo
223	.addLabel("ici", "+=0.3")  // ajout d'une pause apres l'animation
224	.to(splash, {duration: 1.2, opacity:0, ease: "power4.out" }, 'ici') // transition et disparition du splah
225	.to(splash_logo, {duration: 1.2, scale:0, opacity:0, ease: "power4.out" }, 'ici-=.3') // disparition du logo
226	.set(splash, { display:'none'})  // suppression total du html 
227/* 	.addLabel("anim_diapo", "-=1.5")
228	.from(diapo_scale, 1.5,{opacity:0, scale:1.6, ease: Expo.easeInOut },"anim_diapo")
229	.to(splash_logo, .5, {opacity:0,  scale:.8, ease: Power4.easeInOut  },"anim_diapo+=.4") */
230	.addLabel("intro", "-=1.8") // ajout d'une pause ou debuter le reste avant la fin précedante
231	.from(matrix, { duration: 1.5, yPercent: 150, transform: "matrix(0.99619, 0.08715, 0, 1, 0, 0)", ease: "expo.inOut", stagger: 0.25 }, "intro")
232	.addLabel("ui_", "-=.8")
233	.from(header, {duration: 1, y: '-=101%', ease:  "expo.inOut"  }, "ui_")
234	/* .from(ui_logo, .5, { yPercent: -250, transform: "matrix(0.99619, 0.08715, 0, 1, 0, 0)", ease: Expo.easeInOut   }, "ui_-=.2") */
235	/* .from(ui_scroll, 1, {y: 100, scale: 1.1, ease:  Expo.easeInOut  }, "ui_") */
236  }