script.js

var crsr = document.querySelector("#cursor")
var blur = document.querySelector("#cursor-blur")
document.addEventListener("mousemove",function(dets){
       crsr.style.left = dets.x+30+"px"
       crsr.style.top = dets.y+"px"
       blur.style.left = dets.x-250+"px"
       blur.style.top = dets.y-250+"px"
})

gsap.to("#nav",{
backgroundColor:"#000",
duration:0.9,
height:"100px",
scrollTrigger:{
    trigger:"#nav",
    scroller:"body",
    // markers: true,
    start:"top -20%",
    end:"top -21%",
    scrub:1
}
})

gsap.to("#main",{
    backgroundColor: "#000",
    scrollTrigger:{
        trigger:"#main",
        scroller:"body",
        // markers:true,
        start:"top -25%",
        end:"top -70%",
        scrub:1
    }
})

var h4all = document.querySelectorAll("#nav h4")
// console.log(h4all)
h4all.forEach(function(elem){
    elem.addEventListener("mouseenter",function(){
        crsr.style.scale = 3
        crsr.style.border = "1px solid #fff"
        crsr.style.backgroundColor = "transparent"
    })
})
h4all.forEach(function(elem){
    elem.addEventListener("mouseleave",function(){
        crsr.style.scale = 1
        crsr.style.border = "0px solid #96C11E"
        crsr.style.backgroundColor = "#96C11E"
    })
})

gsap.from("#about-us img, #about-us-in",{
    y:90,
    opacity: 0,
    duration: 1,
    scrollTrigger:{
        trigger:"#about-us",
        scroller:"body",
        // markers:true,
        start:"top 70%",
        end:"top 65%",
        scrub: 3
    }
})
gsap.from(".card",{
    y:90,
    scale: 0.8,
    opacity:0,
    duration: 1,
    scrollTrigger:{
        trigger:".card",
        scroller:"body",
        // markers:true,
        stagger:0.1,
        start:"top 70%",
        end:"top 65%",
        scrub: 2
    }
})

gsap.from("#colon1",{
    y: -70,
    x: -70,
    scrollTrigger:{
        trigger:"#colon1",
        scroller:"body",
        // markers:true,
        start: "top 55%",
        end: "top 45%",
        scrub: 4

    }
})
gsap.from("#colon2",{
    y: 70,
    x: 70,
    scrollTrigger:{
        trigger:"#colon1",
        scroller:"body",
        // markers:true,
        start: "top 55%",
        end: "top 45%",
        scrub: 4

    }
})

gsap.from("#page4 h1",{
    y:50,
    scrollTrigger:{
        trigger:"#page4 h1",
        scroller:"body",
        // markers:true,
        start: "top 80%",
        end: "top 70%",
        scrub: 2

    }
})