1 files changed, 57 insertions, 0 deletions
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..bdb0add
--- /dev/null
+++ b/index.js
@@ -0,0 +1,57 @@
+gsap.registerPlugin(ScrollTrigger);
+
+const pageContainer = document.querySelector(".container");
+
+/* SMOOTH SCROLL */
+const scroller = new LocomotiveScroll({
+  el: pageContainer,
+  smooth: true,
+});
+
+scroller.on("scroll", ScrollTrigger.update);
+
+ScrollTrigger.scrollerProxy(pageContainer, {
+  scrollTop(value) {
+    return arguments.length
+      ? scroller.scrollTo(value, 0, 0)
+      : scroller.scroll.instance.scroll.y;
+  },
+  getBoundingClientRect() {
+    return {
+      left: 0,
+      top: 0,
+      width: window.innerWidth,
+      height: window.innerHeight,
+    };
+  },
+  pinType: pageContainer.style.transform ? "transform" : "fixed",
+});
+
+////////////////////////////////////
+////////////////////////////////////
+window.addEventListener("load", function () {
+  let pinBoxes = document.querySelectorAll(".pin-wrap > *");
+  let pinWrap = document.querySelector(".pin-wrap");
+  let pinWrapWidth = pinWrap.offsetWidth;
+  let horizontalScrollLength = pinWrapWidth - window.innerWidth;
+
+  // Pinning and horizontal scrolling
+
+  gsap.to(".pin-wrap", {
+    scrollTrigger: {
+      scroller: pageContainer, //locomotive-scroll
+      scrub: true,
+      trigger: "#sectionPin",
+      pin: true,
+      // anticipatePin: 1,
+      start: "top top",
+      end: pinWrapWidth,
+    },
+    x: -horizontalScrollLength,
+    ease: "none",
+  });
+
+  ScrollTrigger.addEventListener("refresh", () => scroller.update()); //locomotive-scroll
+
+  ScrollTrigger.refresh();
+});