locomotivemtl / locomotive-scroll

🛤 Detection of elements in viewport & smooth scrolling with parallax.
https://locomotivemtl.github.io/locomotive-scroll
MIT License
7.83k stars 1.12k forks source link

GSAP cancels scrollTo animation #558

Open EddyRespondek opened 4 months ago

EddyRespondek commented 4 months ago

I'm having issues with the following code. If GSAP is run during scrollTo then the scroll is cancelled. I also tried using with on scroll and the issue remains. Is there a known work around for this?

const scroll = new LocomotiveScroll({
    el: document.querySelector('[data-scroll-container]'),
    smooth: false,
    multiplier: 1,
    getDirection: true,
    offset: ["15%", "85%"],
    repeat: false,
});

if (window.location.hash) {
    if ( document.querySelector('.header') ) {
        offset = parseInt('-' + ( document.querySelector('.header').offsetHeight ));
    }

    scroll.scrollTo( window.location.hash, { offset: offset } );
}

scroll.on('call', (funcs, way, obj) => {
    if ( !Array.isArray(funcs) ) {
        funcs = [funcs];
    }

    funcs.forEach((func) => {
        if ( func === 'layoutInView' ) {
            layoutInView(way, obj);
        }
    });
});

function layoutInView(way, obj) {
    const h1 = document.querySelectorAll('#' + obj.targetEl.getAttribute('id') + ' h1');

    if ( way === 'enter' ) {
        h1.forEach((title) => {
            if ( !title.classList.contains('done') ) {
                const splitTitle = new SplitType(title, { types: 'lines, chars' });

                gsap.from(splitTitle.chars, {
                    opacity: 0,
                    y: 0,
                    duration: 1,
                    stagger: { amount: 2 },
                });

                title.classList.add('done');
            }
        });
    }
}
ronca85 commented 1 month ago

Why do you need such complexity? Send a link to the live page so I can see what's going on.