locomotivemtl / locomotive-scroll

🛤 Detection of elements in viewport & smooth scrolling with parallax.

Home Page:https://locomotivemtl.github.io/locomotive-scroll

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

GSAP cancels scrollTo animation

EddyRespondek opened this issue · comments

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