Any help would be appreciated greatly here, I've read the docs thoroughly and haven't had much luck with this.
Basically of scroll of my pinned section (third section), it's as if it recalculates scroll values and makes the horizontal effect a little jumpy initially, after which is resolves and can't be replicated until a page refresh. I've just tried the fastScrollEnd and preventOverlaps but seemed to make worse.
This is the code in question, I thought it may of been because I was animating the right value beforehand but I sinced changed it to 'x'. I also have no other pinned sections on the page.
let scrollWidth = window.innerWidth > 768 ? self.elements.projectsHomeCards.scrollWidth/1.3 + 40 : self.elements.projectsHomeCards.scrollWidth/1.2 + 60
gsap.set(self.elements.projectsHomeCards, { x: window.innerWidth + 40 });
gsap.to(self.elements.projectsHomeCards, {
x: -self.elements.projectsHomeCards.scrollWidth + window.innerWidth / 2,
ease: "none",
scrollTrigger: {
trigger: self.elements.projectsHome.parentNode,
fastScrollEnd: true,
preventOverlaps: true,
pin: true,
scrub: 1,
end: () => "+=" + (scrollWidth)
}
})
Any advice here or areas to explore? thanks in advance.
Live site URL:
https://weareabstrakt.com/
