script.js

function locomotiveScroll()
{
    const locoScroll = new LocomotiveScroll({
        el: document.querySelector("#main"),
        smooth: true,
      });
}
function loadingAnimation()
{
    var tl=gsap.timeline();
    tl.from(".line h1, .line h2",{
        y:150,
        stagger:0.25,
        duration:0.6,
        delay:0.5
    });
    // todo counter element aane ke baad chalu hona chahiye
    tl.from("#line1-part1 , .line h2",{
        opacity:0,
        onStart:function(){
            var loadProg = document.querySelector("#line1-part1 h5");
            let grow = 0;
            setInterval(() => {
            if(grow<100)
            {
            loadProg.textContent=grow++;
            }
            else{
                loadProg.textContent=grow;
            }
            }, 33);
        }
    });
    tl.to('#loader',{
        y: "-100%",
        duration:1.2,
        delay:1.2,
        ease: "power4.inOut"
    });
    tl.from('#page1',{
        y: "100vh",
        opacity: 0,
        duration: 1.2,
        ease:Power4
    });
    tl.to('#loader',{
        display:"none"
    })
    tl.from("#content1 h1,#content2 h1,#content3 h2,#content3 h3,#content4 h1",{
        y: 140,
        stagger: 0.2
    });
}

function cursorAnimation()
{
    // const cursor = document.querySelector("#cursor");
    // const scrollContainer = document.querySelector("[data-scroll-container]");
    Shery.mouseFollower({
        skew: true,
        ease: "cubic-bezier(0.23, 1, 0.320, 1)",
        duration: 1,
      });
      Shery.makeMagnet("#nav-part2 h4");
        // ? bcuz locomotive wraps everything inside scrollContainer
    // ?so give data-scroll-container to main
    // ? or we can use window to listen events
    // ?but that will visible cursor on the loader too
    // scrollContainer.addEventListener("mousemove",function(dets){
    //     gsap.to("#cursor",{
    //         top :dets.clientY,
    //         left:dets.clientX
    //     });
    // })
}
function sheryAnimation() {
    Shery.imageEffect(".image-div", {
        style: 5,
        debug: false,
        gooey: true,
        config:{"a":{"value":2.06,"range":[0,30]},"b":{"value":0.76,"range":[-1,1]},"zindex":{"value":1,"range":[-9999999,9999999]},"aspect":{"value":0.7999835876137202},"ignoreShapeAspect":{"value":true},"shapePosition":{"value":{"x":0,"y":0}},"shapeScale":{"value":{"x":0.5,"y":0.5}},"shapeEdgeSoftness":{"value":0,"range":[0,0.5]},"shapeRadius":{"value":0,"range":[0,2]},"currentScroll":{"value":0},"scrollLerp":{"value":0.07},"gooey":{"value":true},"infiniteGooey":{"value":false},"growSize":{"value":4,"range":[1,15]},"durationOut":{"value":1,"range":[0.1,5]},"durationIn":{"value":1.5,"range":[0.1,5]},"displaceAmount":{"value":0.5},"masker":{"value":true},"maskVal":{"value":1.21,"range":[1,5]},"scrollType":{"value":0},"geoVertex":{"range":[1,64],"value":16},"noEffectGooey":{"value":false},"onMouse":{"value":0},"noise_speed":{"value":1.53,"range":[0,10]},"metaball":{"value":0.4,"range":[0,2]},"discard_threshold":{"value":0.5,"range":[0,1]},"antialias_threshold":{"value":0,"range":[0,0.1]},"noise_height":{"value":0.35,"range":[0,2]},"noise_scale":{"value":7.63,"range":[0,100]}},
        //! Config breaks when debug is off,
        // ! change these values after copying the config
        // ? zindex:1,noEffectGooey:false,geoVertex value:16
    });
}
function videoAnimation(){
    const vidCtn = document.querySelector("#video-container");
    const vidCrsr = document.querySelector("#video-cursor");
    vidCtn.addEventListener("mouseenter",()=>{
        document.querySelector("#cursor").style.opacity="0";
        document.querySelector("#cursor").style.transition="all ease 0.2s";

        vidCtn.addEventListener("mousemove",(e)=>{
            gsap.to('#video-cursor',{
                top:e.y-205,
                left:e.x-450
            })
        })
    });
    vidCtn.addEventListener("mouseleave",()=>{
        document.querySelector("#cursor").style.opacity="1";
        document.querySelector("#cursor").style.transition="all ease 0.2s";

        gsap.to('#video-cursor',{
            top: "-15%",
            left: "70%"
        })
        });
        vidCrsr.style.transition="all ease 0.1s";


    let flag = 0;
    const video = document.querySelector("#video-container video");
    vidCtn.addEventListener("click",()=>{

        if(flag==0)
        {
        video.play()
        video.style.opacity="1";
        vidCrsr.style.scale="0.7";
        video.style.transition="all ease 0.2s";
        vidCrsr.style.transition="all ease 0.3s";
        flag=!flag
        }
        else
        {
        video.pause()
        video.style.opacity="0";
        vidCrsr.style.scale="1"
        video.style.transition="all ease 0.2s";
        vidCrsr.style.transition="all ease 0.3s";
        flag=!flag
        }
    })
}
function flagAnimation(scroll){
    let flagCtn = document.querySelector("#content3");
    let flag = document.querySelector("#flag");
    flagCtn.addEventListener("mouseenter",()=>{
        flag.style.opacity="1"
        flag.style.transition="all ease 0.2s"
        flagCtn.addEventListener("mousemove",(dets)=>{
            //? Get scroll from locomotive instance
            // !locomotive doesnt use native scroll it uses trasnslateY and wraps everything in data-scroll-container
            const scrollY = scroll.scroll.instance.scroll.y;
            gsap.to("#flag",{
                top:dets.clientY + scrollY,
                left:dets.clientX
            });
        })
    })
    flagCtn.addEventListener("mouseleave",()=>{
        flag.style.opacity="0"
        flag.style.transition="all ease 0.2s"

    })

}
function textHoverAnimation()
{

    const $el = $('#footer-text h1');
    $el.textillate({
        autoStart:false ,
        in: { effect: 'fadeIn' } });
    // Start animation once on page load so it's visible
    $el.textillate('start');
    const text = document.querySelector('#footer-text h1');

    text.addEventListener("mouseenter",()=>{
            text.classList.add("hovered");
            $el.textillate('start');

    });
    text.addEventListener("mouseleave",()=>{
            text.classList.remove("hovered")
            $el.textillate('start');

    })


}


//? for postitoning the flag with locomotive scroll
const scroll = new LocomotiveScroll({
    el: document.querySelector("[data-scroll-container]"),
    smooth: true
});
loadingAnimation();
locomotiveScroll();
cursorAnimation()
flagAnimation(scroll);
videoAnimation()
sheryAnimation()
textHoverAnimation()