https://timtebowfoundation.org/application/themes/genesis/js/animation-2.js

1//Enables Scroll Trigger
2gsap.registerPlugin(ScrollTrigger);
3
4//Timeline for header h1 animation on load
5if (document.querySelector(".mainHeader h1, .headerIntro h1")) {
6
7	const pageTitle = gsap.timeline();
8
9	pageTitle.from(".mainHeader h1, .headerIntro h1", {
10		opacity: 0,
11		y: -30,
12		duration: 0.8,
13		delay: 3.5,
14		ease: "power1.out"
15	});
16
17	if (document.querySelector(".headerIntro h4")) {
18		pageTitle.from(".headerIntro h4", {
19			opacity: 0,
20			x: -30,
21			duration: 0.8,
22			delay: -0.3,
23			ease: "power1.out"
24		});
25	}
26
27	if (document.querySelector(".headerIntro img")) {
28		pageTitle.from(".headerIntro img", {
29			opacity: 0,
30			y: -30,
31			duration: 0.8,
32			delay: -0.3,
33			ease: "power1.out"
34		});
35	}
36
37	if (document.querySelector(".headerIntro p")) {
38		pageTitle.from(".headerIntro p", {
39			opacity: 0,
40			y: -30,
41			duration: 0.8,
42			delay: -0.3,
43			ease: "power1.out"
44		});
45	}
46
47}
48
49
50//Timeline to animate in the header donations box
51if (document.querySelector(".headerIntro .donationsBox")) {
52
53	const headerdonationsBox = gsap.timeline();
54
55	headerdonationsBox
56		.from(".headerIntro .donationsBox", {
57			opacity: 0,
58			y: 20,
59			duration: 0.8,
60			delay: 3.8,
61			ease: "power1.out"
62		});
63
64	if (document.querySelector(".headerIntro .donationsBox .fa-circle-dollar-to-slot")) {
65		headerdonationsBox.from(".headerIntro .donationsBox .fa-circle-dollar-to-slot", {
66			opacity: 0,
67			y: 20,
68			duration: 0.3,
69			ease: "power1.out"
70		});
71	}
72
73	if (document.querySelector(".headerIntro .donationsBox h5")) {
74		headerdonationsBox.from(".headerIntro .donationsBox h5", {
75			opacity: 0,
76			y: 40,
77			duration: 0.6,
78			ease: "back.out(1.7)"
79		});
80	}
81
82	if (document.querySelector(".headerIntro .donationsBox h6")) {
83		headerdonationsBox.from(".headerIntro .donationsBox h6", {
84			opacity: 0,
85			y: 20,
86			duration: 0.3,
87			ease: "power1.out"
88		});
89	}
90
91	if (document.querySelector(".headerIntro .donationsBox .btnShell .btn")) {
92		headerdonationsBox.fromTo(
93			".headerIntro .donationsBox .btnShell .btn",
94			{
95				opacity: 0
96			},
97			{
98				opacity: 1,
99				duration: 0.3,
100				stagger: 0.2,
101				ease: "power1.out"
102			}
103		);
104	}
105
106}
107	
108	
109	
110
111let mm = gsap.matchMedia();
112
113// add a media query. When it matches, the associated function will run
114// medium desktop
115mm.add("(min-width: 992px)", () => {
116	
117// blog - pin the social share icons on desktop
118if (document.querySelector("#socialLinks") && document.querySelector(".content")) {
119
120	gsap.to("#socialLinks", {
121		ease: "none",
122		scrollTrigger: {
123			trigger: "#socialLinks",
124			start: "top top+=60px",
125			endTrigger: ".content",
126			end: "bottom bottom+=35px",
127			pin: true,
128			scrub: true
129		}
130	});
131
132}
133	
134// MVP Projects - pin the problem title on desktop
135if (document.querySelector("#problem") && document.querySelector("#problem .iconTitle")) {
136
137	gsap.to("#problem", {
138		ease: "none",
139		scrollTrigger: {
140			trigger: "#problem .iconTitle",
141			start: "top top+=60px",
142			endTrigger: "#problem",
143			end: "bottom top+=250px",
144			pin: true,
145			scrub: true
146		}
147	});
148
149}
150	
151// MVP Projects - pin the solution title on desktop
152if (document.querySelector("#solution") && document.querySelector("#solution .iconTitle")) {
153
154	gsap.to("#solution", {
155		ease: "none",
156		scrollTrigger: {
157			trigger: "#solution .iconTitle",
158			start: "top top+=60px",
159			endTrigger: "#solution",
160			end: "bottom top+=250px",
161			pin: true,
162			scrub: true
163		}
164	});
165
166}
167
168});
169
170
171
172
173
174
175// MVP Projects - pin the problem/solution titles on desktop
176// let pinTitle = gsap.matchMedia();
177
178// // add a media query. When it matches, the associated function will run
179// pinTitle.add("(min-width: 992px)", () => {
180
181	// gsap.to("#problem", {
182		// ease: 'none',
183		// scrollTrigger: {
184			// trigger: '#problem .iconTitle',
185			// start: 'top top+=60px',
186			// endTrigger: "#problem",
187			// end: 'bottom top+=250px',
188			// pin: true,
189			// scrub: true
190		// }
191	// });
192
193// });
194	
195
196//Fade in the staff members, fade up staggered
197if (document.querySelector(".staffMember")) {
198
199	ScrollTrigger.batch(".staffMember", {
200		onEnter: batch => gsap.from(batch, {
201			opacity: 0,
202			y: 30,
203			stagger: 0.3
204		}),
205	});
206
207}
208	
209//Fade in the projects, fade up staggered
210if (document.querySelector(".ccm-block-page-list-page-entry")) {
211
212	ScrollTrigger.batch(".ccm-block-page-list-page-entry", {
213		onEnter: batch => gsap.from(batch, {
214			opacity: 0,
215			y: 30,
216			stagger: 0.3
217		}),
218	});
219
220}
221	
222	
223//Fade in the project videos, fade up staggered
224if (document.querySelector(".projectVideosRow .youtubePopup")) {
225
226	ScrollTrigger.batch(".projectVideosRow .youtubePopup", {
227		onEnter: batch => gsap.from(batch, {
228			opacity: 0,
229			y: 30,
230			stagger: 0.3
231		}),
232	});
233
234}
235
236	

237function init() {
238	
239	//Make footer background parallax
240	const footerTl = gsap.timeline();
241
242	footerTl
243	.fromTo("footer", {
244		backgroundPosition: "50% 100%"
245	},
246	{
247		backgroundPosition: "50% 0%",
248		scrollTrigger: {
249		trigger: "footer",
250		start: "top bottom",
251		scrub: true
252		}
253	});
254	
255	
256	//Animate drawing the circle svg
257	// let handdrawnCircle = gsap.utils.toArray(".handdrawn-circle");
258
259	// handdrawnCircle.forEach( (element) => {	  
260	  
261	  // let handdrawnCircletl = gsap.timeline()
262		
263		// .from(element, {
264		
265		// })
266	
267		// ScrollTrigger.create({
268			// trigger: element,
269			// start:"top center",
270			// toggleActions:"play none none reverse",
271			// toggleClass: "active",
272			// animation: handdrawnCircletl
273		// })
274	
275	// });
276	
277	
278	
279	
280	//Fade in elements from the right, moving left
281	let fadeLeft = gsap.utils.toArray(".fadeLeft, .featureListBox, .statWrapper img, .statWrapper .statInner");
282
283	fadeLeft.forEach( (element) => {	  
284	  
285	  let fadeLefttl = gsap.timeline()
286		
287		.from(element, {
288			opacity: 0,
289			x: 30,
290			duration: 0.8,
291			ease: "power1.out"
292		})
293	  
294		ScrollTrigger.create({
295			trigger:element,
296			start:"top 85%",
297			toggleActions:"play none none reverse",
298			animation: fadeLefttl
299		})
300	
301	});
302
303
304	//Fade in iconLeft buttons from the right, moving left
305	let btnfadeLeft = gsap.utils.toArray(".featurePhoto .btnShell, .featureVideo .btnShell");
306
307	btnfadeLeft.forEach( (element) => {	  
308	  
309	  let btnfadeLefttl = gsap.timeline()
310		
311		.from(element, {
312			opacity: 0,
313			x: 30,
314			duration: 0.8,
315			ease: "power1.out"
316		})
317	
318		ScrollTrigger.create({
319			trigger:element,
320			start:"top 85%",
321			toggleActions:"play none none reverse",
322			animation: btnfadeLefttl
323		})
324	
325	});
326	
327	
328	//Fade in list items from the right, moving left, staggered
329	let listfadeLeft = gsap.utils.toArray(".featureListBox ul");
330
331	listfadeLeft.forEach( (element) => {	  
332	  
333	  let listfadeLefttl = gsap.timeline()
334		
335		.from(element.children, {
336			opacity: 0,
337			x: 30,
338			duration: 0.8,
339			stagger: 0.3,
340			ease: "power1.out"
341		})
342	  
343		ScrollTrigger.create({
344			trigger: element,
345			start:"top 85%",
346			toggleActions:"play none none reverse",
347			animation: listfadeLefttl
348		})
349	
350	});
351
352
353	//Fade in testimonial quotes - fade up, staggered
354	let testimonial = gsap.utils.toArray(".ccm-block-testimonial-text");
355
356	testimonial.forEach( (element) => {	  
357	  
358	  let testimonialtl = gsap.timeline()
359		
360		.from(element.children, {
361			opacity: 0,
362			y: -15,
363			duration: 0.8,
364			stagger: 0.3,
365			ease: "power1.out"
366		})
367	  
368		ScrollTrigger.create({
369			trigger: element,
370			start:"top 85%",
371			toggleActions:"play none none reverse",
372			animation: testimonialtl
373		})
374	
375	});
376	
377	
378	//Fade in featureItems - fade up, staggered
379	ScrollTrigger.batch(".featureGrid .ccm-block-feature-item", {
380	  onEnter: batch => gsap.from(batch, {
381		  opacity: 0, 
382		  y: 30, 
383		  stagger: 0.3
384		  }),
385	});
386	
387	//Fade in featureItem children - fade up, staggered
388	let featureItem = gsap.utils.toArray(".featureGrid .ccm-block-feature-item");
389
390	featureItem.forEach( (element) => {	  
391	  
392	  let featureItemtl = gsap.timeline()
393		
394		.from(element.children, {
395			opacity: 0,
396			y: 30,
397			duration: 0.8,
398			stagger: 0.3,
399			ease: "power1.out"
400		})
401	  
402		ScrollTrigger.create({
403			trigger: element,
404			start:"top 85%",
405			toggleActions:"play none none reverse",
406			animation: featureItemtl
407		})
408	
409	});
410	
411	
412	
413	//Fade in Key Stats statWrapper, staggered
414	let keyStats = gsap.utils.toArray(".statWrapper .statInner");
415
416	keyStats.forEach( (element) => {	  
417	  
418	  let keyStatstl = gsap.timeline()
419		
420		.from(element.children, {
421			opacity: 0,
422			x: 30,
423			duration: 0.8,
424			stagger: 0.3,
425			ease: "power1.out",
426			delay: 0.3
427		})
428	  
429		ScrollTrigger.create({
430			trigger: element,
431			start:"top 85%",
432			toggleActions:"play none none reverse",
433			animation: keyStatstl
434		})
435	
436	});
437
438	
439	
440	//Fade in elements from the left, moving right
441	let fadeRight = gsap.utils.toArray(".fadeRight, .featurePhoto img, .ccm-custom-style-maincontent247-18164 img, .ccm-custom-style-maincontent250-18165 img");
442
443	fadeRight.forEach( (element) => {	  
444	  
445	  let fadeRighttl = gsap.timeline()
446		
447		.from(element, {
448			opacity: 0,
449			x: -30,
450			duration: 0.8,
451			ease: "power1.out"
452		})
453	  
454		ScrollTrigger.create({
455			trigger:element,
456			start:"top 85%",
457			toggleActions:"play none none reverse",
458			animation: fadeRighttl
459		})
460	
461	});
462
463
464	//Fade up elements	
465	let fadeUp = gsap.utils.toArray(".fadeUp, h2, h3, .intro p, .mainContent .simple.btnShell, .featurePhoto p, .featureVideo p, .featureBoxMinistry, .featureBoxMinistry .statBoxWrapper, .featureBoxMinistry p, .featureListBox h4, .splide, .ccm-block-testimonial, .content p, #lipsum p, .statsShell .animatedSlides-xyz, .iconTitle i, .center img, .center p, .horizontalFeatureItem .ccm-block-feature-item, .col-sm-8 img");
466

467	fadeUp.forEach( (element) => {	  
468	  
469	  let fadeUptl = gsap.timeline()
470		
471		.from(element, {
472			opacity: 0,
473			y: 30,
474			duration: 0.8,
475			ease: "power1.out"
476		})
477	  
478		ScrollTrigger.create({
479			trigger:element,
480			start:"top 85%",
481			toggleActions:"play none none reverse",
482			animation: fadeUptl
483		})
484	});
485
486
487
488	//Fade in the color fade change - toggle active class 
489	let blueFade = gsap.utils.toArray(".darkestBlueFadeAfter");
490
491	blueFade.forEach( (element) => {	  
492	  
493	  let blueFadetl = gsap.timeline()
494		
495		.from(element, {
496
497		})
498	  
499		ScrollTrigger.create({
500			trigger:element,
501			start:"bottom 50%",
502			toggleActions:"play none none reverse",
503			animation: blueFadetl,
504			toggleClass: "active"
505		})
506	});
507
508
509	//Fade in the color fade change 
510	let grayFade = gsap.utils.toArray(".darkestGrey");
511
512	grayFade.forEach( (element) => {	  
513	  
514	  let grayFadetl = gsap.timeline()
515		
516		.from(element, {
517			
518			backgroundColor: '#001725',
519			duration: 3
520		})
521	  
522		ScrollTrigger.create({
523			trigger:element,
524			start:"top 50%",
525			toggleActions:"play none none reverse",
526			animation: grayFadetl
527		})
528	});
529	
530	
531	
532	//Fade in donationsBox on scroll
533	let donationsBox = gsap.utils.toArray(".darkestBlue .donationsBox");
534
535	donationsBox.forEach( (element) => {	  
536	  
537	  let donationsBox = gsap.timeline()
538		
539		.from(".darkestBlue .donationsBox", {
540		opacity: 0,
541		y: 20,
542		duration: 0.8,
543		ease: "power1.out"
544		})
545		.from(".darkestBlue .donationsBox .fa-circle-dollar-to-slot", {
546			opacity: 0,
547			y: 20,
548			duration: 0.3,
549			ease: "power1.out"
550		})
551		.from(".darkestBlue .donationsBox h5", {
552			opacity: 0,
553			y: 40,
554			duration: 0.6,
555			ease: "back.out(1.7)"
556		})
557		.from(".darkestBlue .donationsBox h6", {
558			opacity: 0,
559			y: 20,
560			duration: 0.3,
561			ease: "power1.out"
562		})
563		.fromTo(".darkestBlue .donationsBox .btnShell .btn", {
564			opacity: 0
565		},{
566			opacity: 1,
567			duration: 0.3,
568			stagger: 0.2,
569			ease: "power1.out"
570		})
571	  
572		ScrollTrigger.create({
573			trigger:element,
574			start:"top 85%",
575			toggleActions:"play none none reverse",
576			animation: donationsBox
577		})
578	
579	});	
580	
581	
582	//Fade in the staff members, fade up staggered	
583	// ScrollTrigger.batch(".staffMember", {
584	  // onEnter: batch => gsap.from(batch, {
585		  // opacity: 0, 
586		  // y: 30, 
587		  // stagger: 0.3
588		  // }),
589	// });
590	
591
592	
593}//end function init
594
595
596
597
598window.addEventListener('load', function(){
599	init();
600});
601
602/*flipcard js below*//**************************************** */
603if ('ontouchstart' in window || navigator.maxTouchPoints) {
604	$('.statDescription').on('click', function (event) {
605		$(this).addClass('close');
606		$(this).siblings('div.statNumber').addClass('open');
607	});
608	$('.statInner').on('mouseover', function(){
609		var $statNumber = $(this).find('.statNumber');
610        var $statDescription = $(this).find('.statDescription');
611
612		if ($statNumber.hasClass('open') && $statDescription.hasClass('close')) {
613			$statDescription.removeClass('close');
614            $statNumber.removeClass('open');
615		}
616	});
617}
618
619
620/*timeline js below*//**************************************** */
621(function () {
622	"use strict";
623  
624	// define variables
625	var items = document.querySelectorAll(".timeline li");
626  
627	// check if an element is in viewport
628	// http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
629	function isElementInViewport(el) {
630		var rect = el.getBoundingClientRect();
631		return (
632			rect.top >= 0 &&
633			// rect.left >= 0 &&
634			// rect.bottom <=
635			rect.top <= (window.innerHeight || document.documentElement.clientHeight) /*&&*/
636			// rect.right <= (window.innerWidth || document.documentElement.clientWidth)
637		);
638	}
639  
640	function callbackFunc() {
641		for (var i = 0; i < items.length; i++) {
642			if (isElementInViewport(items[i])) {
643				items[i].classList.add("in-view");
644			}
645		}
646	}
647  
648	// listen for events
649	window.addEventListener("load", callbackFunc);
650	window.addEventListener("resize", callbackFunc);
651	window.addEventListener("scroll", callbackFunc);
652})();
653