first commit

resources/assets/js/demos/demo-marketing-1.js

@@ -0,0 +1,102 @@
+/*
+Name:           Demo Marketing 1
+Written by:     Okler Themes - (http://www.okler.net)
+Theme Version:  12.1.0
+*/
+
+(($ => {
+    gsap.registerPlugin(ScrollTrigger);
+
+    /*
+	Section Scale
+	*/
+    gsap.utils.toArray(".gsap-section-scale").forEach((section, index) => {
+		const tl1 = gsap.timeline({
+			scrollTrigger: {
+				trigger: section,
+				start: "100% 100%",
+				end: "bottom top",
+				scrub: true
+			},
+		});
+	
+		tl1.fromTo(
+			section, {
+				scale: 1,
+			},
+			{
+				scale: 0.9,
+				duration: 1,
+				ease: "power2.out"
+			}
+		);
+	});
+
+    /*
+	Image Change
+	*/
+    gsap.defaults({ overwrite: 'auto'});
+
+    // Set up our scroll trigger
+    const ST = ScrollTrigger.create({
+		trigger: ".gsap-content-container",
+		start: "top top",
+		end: "bottom bottom",
+		onUpdate: getCurrentSection
+	});
+
+    const contentMarkers = gsap.utils.toArray(".gsap-content-marker");
+
+    // Set up our content behaviors
+    contentMarkers.forEach(marker => {
+		marker.content = document.querySelector(`#${marker.dataset.markerContent}`);
+
+		marker.content.enter = () => {
+			gsap.fromTo(marker.content, {
+				autoAlpha: 0
+			}, {
+				duration: 0.3,
+				autoAlpha: 1
+			});
+		}
+	
+		marker.content.leave = () => {
+			gsap.to(marker.content, {
+				duration: 0.1,
+				autoAlpha: 0
+			});
+		}
+	
+	});
+
+    // Handle the updated position
+    let lastContent;
+
+    function getCurrentSection() {
+		let newContent;
+		const currScroll = scrollY;
+
+		// Find the current section
+		contentMarkers.forEach(({offsetTop, content}) => {
+			if (currScroll > (offsetTop - 100)) {
+				newContent = content;
+			}
+		});
+	
+		// If the current section is different than that last, animate in
+		if (newContent &&
+			(lastContent == null ||
+				!newContent.isSameNode(lastContent))) {
+			// Fade out last section
+			if (lastContent) {
+				lastContent.leave();
+			}
+	
+			// Animate in new section
+			newContent.enter();
+	
+			lastContent = newContent;
+		}
+	
+	}
+})).apply( this, [ jQuery ]);