script.js

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();
}

function cursor(){
    Shery.mouseFollower({
        //Parameters are optional.
        skew: true,
        ease: "cubic-bezier(0.23, 1, 0.320, 1)",
        duration: 1,
      });
}

function about(){
  gsap.from("#about-main h4", {
    opacity: 0,
    duration: 20,
    scrollTrigger:{
      trigger:"#about-main",
      scroller:"#main",
      // markers:true,
      end:"top 0",
      start:"top 100%",
      stagger:0.1,
      scrub:1,
    }
  })
}

function load(){
  document.addEventListener("DOMContentLoaded", function() {
    // Get the loader element
    var loader = document.getElementById("loader");

    // Function to hide the loader after 7 seconds
    function hideLoader() {
        loader.style.display = "none";  // Hide the loader
    }

    // Set a timeout to call the hideLoader function after 7 seconds
    setTimeout(hideLoader, 4500); // 7 seconds = 7000 milliseconds
});
}

load();

cursor();

loco();

about();