app.js

'use Stric';
// Variables
let controller;
let slideScene;
let pageScene;
const mouse = document.querySelector('.cursor');
const mouseText = mouse.querySelector('span');
const burger = document.querySelector('.burger');
const logo = document.querySelector('#logo');
//EventListners 
burger.addEventListener('click', navToggle);
window.addEventListener('mousemove', cursor);
window.addEventListener('mouseover', activeCursor)

// Functions
function animateSlides() {
    //initiate the Controller
    controller = new ScrollMagic.Controller();
    //Select
    const sliders = document.querySelectorAll('.slide');
    const nav = document.querySelector('.nav-header');
    //loop over eact slide 
    sliders.forEach((slide, index, slides) => {
        const revealImg = slide.querySelector('.reveal-img');
        const img = slide.querySelector('img');
        const revealText = slide.querySelector('.reveal-text');
        //Adding GSAP & using timeline to chain multiple elemetns
        const slideTimeLine = gsap.timeline({
            defaults: { duration: 1, ease: 'power2.inOuut' }
        });
        slideTimeLine.fromTo(revealImg, { x: '0%' }, { x: '100%' });
        slideTimeLine.fromTo(img, { scale: 2 }, { scale: 1 }, "-=1");
        slideTimeLine.fromTo(revealText, { x: '0%' }, { x: '100%' }, "-=1");
        slideTimeLine.fromTo(nav, { y: '-100%' }, { y: '0%' }, "-=0.5");

        //Create Scene
        slideScene = new ScrollMagic.Scene({
            triggerElement: slide,
            triggerHook: 0.25,
            reverse: false,
        })
            .setTween(slideTimeLine)

            .addTo(controller);

        //New Animation 
        const pageTimeLine = gsap.timeline();
        let nextSlide = slide.length - 1 === index ? 'end' : slides[index + 1];
        pageTimeLine.fromTo(nextSlide, { y: '0%' }, { y: '50%' });
        pageTimeLine.fromTo(slide, { opacity: 1, scale: 1 }, { opacity: 0, scale: 0.5 });
        pageTimeLine.fromTo(nextSlide, { y: '50%' }, { y: '0%' }, '-=0.4')
        //Create new Scene
        pageScene = new ScrollMagic.Scene({
            triggerElement: slide,
            duration: '100%',
            triggerHook: 0
        })

            .setPin(slide, { pushFollowers: false })
            .setTween(pageTimeLine)
            .addTo(controller);

    })
}
function cursor(e) {
    mouse.style.top = e.pageY + 'px';
    mouse.style.left = e.pageX + 'px';
}
function activeCursor(e) {
    const item = e.target;
    if (item.id === 'logo' || item.classList.contains('burger')) {
        mouse.classList.add('nav-active');

    } else {
        mouse.classList.remove('nav-active');
    }
    if (item.classList.contains('explore')) {
        mouse.classList.add('explore-active');
        gsap.to('.title-swipe', 1, { y: "0%" });
        mouseText.innerText = 'tap';
    } else {
        mouse.classList.remove('explore-active');
        mouseText.innerText = ' ';
        gsap.to('.title-swipe', 1, { y: "100%" });
    }
}
function navToggle(e) {
    if (!e.target.classList.contains('active')) {
        e.target.classList.add('active');
        gsap.to('.line1', 0.5, { rotate: '45', y: 5, background: "black" });
        gsap.to('.line3', 0.5, { opacity: 0 });
        gsap.to('.line2', 0.5, { rotate: '-45', y: -5, background: 'black' });
        gsap.to('#logo', 1, { color: 'black' })
        gsap.to('.nav-bar', 1, { clipPath: 'circle(2500px at 100% -10%)' });
        document.body.classList.add('hide');
    } else {
        e.target.classList.remove('active');
        gsap.to('.line1', 0.5, { rotate: '0', y: 0, background: "white" });
        gsap.to('.line3', 0.5, { opacity: 1 });
        gsap.to('.line2', 0.5, { rotate: '0', y: 0, background: 'white' });
        gsap.to('#logo', 1, { color: 'white' })
        gsap.to('.nav-bar', 1, { clipPath: 'circle(50px at 100% -10%)' });
        document.body.classList.remove('hide');
    }
}

//Barba Page Transition
barba.init({
    views: [{
        namespace: 'home',
        beforeEnter() {
            animateSlides();
            logo.href = './index.html'
        },
        beforeLeave() {
            slideScene.destroy();
            pageScene.destroy();
            controller.destroy();
        }
    },
    {
        namespace: 'fashion',
        beforeEnter() {
            logo.href = '../index.html';
            gsap.fromTo('.nav-header', 1, { y: '20%' }, { y: '0%', ease: 'power2.inOut' })
        }
    }
    ],
    transitions: [
        {
            leave({ current, next }) {
                let done = this.async();

                //Animation
                const tl = gsap.timeline({ defaults: { ease: 'power2.inOut' } });
                tl.fromTo(current.container, 1, { opacity: 1 }, { opacity: 0, onComplete: done })
            },
            enter({ current, next }) {
                let done = this.async();
                //Scroll to top
                window.scrollTo(0, 0);
                //Animation
                const tl = gsap.timeline({ defaults: { ease: 'power2.inOut' } });
                tl.fromTo(next.container, 1, { opacity: 0 }, { opacity: 1, onComplete: done })
            }
        }
    ]
});