https://www.media3.net/js/demos/demo-personal-portfolio-1.js

1/*
2Name:           Demo Personal Portfolio 1
3Written by:     Okler Themes - (http://www.okler.net)
4Theme Version:  10.2.0
5*/
6
7(function( $ ) {
8	
9	'use strict';
10
11	/*
12	Horizontal Scroller Section
13	*/
14	if( $('.horizontal-scroller-item').length ) {
15		if (typeof gsap !== 'undefined') {
16
17			// Copy Original HTML to clone on Resize.
18			var originalScrollHTML = $('.horizontal-scroller').html();
19
20			// Generate Scroller
21			var generateScroller = function() {
22
23				let images = gsap.utils.toArray('.horizontal-scroller-item');
24
25				gsap.to(images, {
26					xPercent: -100 * (images.length - 1),
27					ease: 'none',
28					scrollTrigger: {
29						trigger: '.horizontal-scroller',
30						pin: true,
31						scrub: 1,
32						snap: 1 / (images.length - 1),
33						end: () => '+=' + document.querySelector('.horizontal-scroller-images').offsetWidth
34					}
35				});
36
37			};
38
39			// Resize Event removing and restarting
40			$(window).afterResize(function() {
41
42				setTimeout(function() {
43
44					let Alltrigger = ScrollTrigger.getAll();
45
46					for (let i = 0; i < Alltrigger.length; i++) {
47						Alltrigger[i].kill(true);
48					}
49
50					$('.horizontal-scroller-wrapper').empty().html('<section class="horizontal-scroller bg-dark">' + originalScrollHTML + '</section>');
51
52					generateScroller();
53					generateCircleExpand();
54
55				}, 500);
56
57			});
58
59			/*
60			Circle Expand
61			*/
62			var generateCircleExpand = function() {
63
64				let section = document.getElementById('circleSection'),
65				    dot = document.getElementById("circleDot");
66
67				gsap.set(dot, {
68				    width: "142vmax",
69				    height: "142vmax",
70				    xPercent: -50,
71				    yPercent: -50,
72				    top: "50%",
73				    left: "50%"
74				});
75
76				let tl1 = gsap.timeline({
77					    	scrollTrigger: {
78						        trigger: section,
79						        start: "-50%",
80						        end: "0%",
81								scrub: 2, 
82						        invalidateOnRefresh: true,
83						    },
84						    defaults: {
85						        ease: "none"
86						    }
87						});
88
89				tl1
90				    .fromTo(dot, {
91				        	scale: 0
92					    }, {
93					        x: 0,
94					        y: 0,
95					        ease: "power3.in",
96					        scale: 1
97					    });
98
99			}
100
101			// Init GSAP Elements
102			generateScroller();
103			generateCircleExpand();
104
105
106		} else {
107
108			theme.fn.showErrorMessage('Failed to Load File', 'Failed to load: GSAP - Include the following file(s): (vendor/gsap/gsap.min.js)');
109
110		}
111
112		/*
113		Spotlight Cursor Text - Credits: https://codepen.io/carolineartz/pen/rNaGQYo
114		*/
115		if( $('.spotlight-cursor-text').length ) {
116			if (typeof gsap !== 'undefined') {
117
118				document.body.addEventListener('mousemove', evt => {
119					const mouseX = evt.clientX;
120					const mouseY = evt.clientY;
121
122					gsap.to('.shape', {
123						x: mouseX,
124						y: mouseY,
125						stagger: -0.1
126					});
127				});
128
129			} else {
130
131				theme.fn.showErrorMessage('Failed to Load File', 'Failed to load: GSAP - Include the following file(s): (vendor/gsap/gsap.min.js)');
132
133			}
134		}
135
136	}
137
138}).apply( this, [ jQuery ]);