Add files via upload

scriptx.js

@@ -0,0 +1,127 @@
+function loco(){
+    gsap.registerPlugin(ScrollTrigger);
+
+// Using Locomotive Scroll from Locomotive https://github.com/locomotivemtl/locomotive-scroll
+
+const locoScroll = new LocomotiveScroll({
+  el: document.querySelector("#main"),
+  smooth: true
+});
+// each time Locomotive Scroll updates, tell ScrollTrigger to update too (sync positioning)
+locoScroll.on("scroll", ScrollTrigger.update);
+
+// tell ScrollTrigger to use these proxy methods for the "#main" element since Locomotive Scroll is hijacking things
+ScrollTrigger.scrollerProxy("#main", {
+  scrollTop(value) {
+    return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y;
+  }, // we don't have to define a scrollLeft because we're only scrolling vertically.
+  getBoundingClientRect() {
+    return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight};
+  },
+  // LocomotiveScroll handles things completely differently on mobile devices - it doesn't even transform the container at all! So to get the correct behavior and avoid jitters, we should pin things with position: fixed on mobile. We sense it by checking to see if there's a transform applied to the container (the LocomotiveScroll-controlled element).
+  pinType: document.querySelector("#main").style.transform ? "transform" : "fixed"
+});
+
+// each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll. 
+ScrollTrigger.addEventListener("refresh", () => locoScroll.update());
+
+// after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc.
+ScrollTrigger.refresh();
+}
+loco()
+
+
+var clutter = "";
+
+document.querySelector("#page2>h1").textContent.split("").forEach(function(dets){
+    clutter += `<span>${dets}</span>`
+
+    document.querySelector("#page2>h1").innerHTML = clutter;
+})
+
+
+gsap.to("#page2>h1>span",{
+    scrollTrigger:{
+        trigger:`#page2>h1>span`,
+        start:`top bottom`,
+        end:`bottom top`,
+        scroller:`#main`,
+        scrub:.5,
+    },
+    stagger:.001,
+    color:`#fff`
+})
+function loco(){
+  gsap.registerPlugin(ScrollTrigger);
+
+// Using Locomotive Scroll from Locomotive https://github.com/locomotivemtl/locomotive-scroll
+
+const locoScroll = new LocomotiveScroll({
+el: document.querySelector("#main"),
+smooth: true
+});
+// each time Locomotive Scroll updates, tell ScrollTrigger to update too (sync positioning)
+locoScroll.on("scroll", ScrollTrigger.update);
+
+// tell ScrollTrigger to use these proxy methods for the "#main" element since Locomotive Scroll is hijacking things
+ScrollTrigger.scrollerProxy("#main", {
+scrollTop(value) {
+  return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y;
+}, // we don't have to define a scrollLeft because we're only scrolling vertically.
+getBoundingClientRect() {
+  return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight};
+},
+// LocomotiveScroll handles things completely differently on mobile devices - it doesn't even transform the container at all! So to get the correct behavior and avoid jitters, we should pin things with position: fixed on mobile. We sense it by checking to see if there's a transform applied to the container (the LocomotiveScroll-controlled element).
+pinType: document.querySelector("#main").style.transform ? "transform" : "fixed"
+});
+
+// each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll. 
+ScrollTrigger.addEventListener("refresh", () => locoScroll.update());
+
+// after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc.
+ScrollTrigger.refresh();
+}
+loco()
+
+
+var clutter = "";
+
+document.querySelector("#page5>h1").textContent.split("").forEach(function(dets){
+    clutter += `<span>${dets}</span>`
+
+    document.querySelector("#page5>h1").innerHTML = clutter;
+})
+
+
+gsap.to("#page5>h1>span",{
+    scrollTrigger:{
+        trigger:`#page5>h1>span`,
+        start:`top bottom`,
+        end:`bottom top`,
+        scroller:`#main`,
+        scrub:.5,
+    },
+    stagger:.001,
+    color:`#fff`
+})
+
+var clutter = "";
+
+document.querySelector("#page5>h1::before").textContent.split("").forEach(function(dets){
+    clutter += `<span>${dets}</span>`
+
+    document.querySelector("#page5>h1::before").innerHTML = clutter;
+})
+
+
+gsap.to("#page5>h1::before>span",{
+    scrollTrigger:{
+        trigger:`#page5>h1::before>span`,
+        start:`top bottom`,
+        end:`bottom top`,
+        scroller:`#main`,
+        scrub:.5,
+    },
+    stagger:.001,
+    color:`#fff`
+})