Jorjatis Posted January 8 Posted January 8 Hey guys! I can't find a proper solution, but this has happened to me a lot of times. As you see, when I resize the browser or refresh the page in some parts where I have the scroll animation on screen, the positioning of the start and end changes drastically making the animation to crash or overlap the content on top or bottom. Here's the codepen: I use to fix it changing the document.addEventListener("DOMContentLoaded", () => { for a: window.addEventListener('load', () => { and adding ScrollTrigger.refresh(); at the end. Also adding a window.scrollTo 0 'instant', onBeforeUnload, so it goes top, but I dont know if there is some mistake I am doing or because it does not refresh at all Thanks in advance! See the Pen qEWxaPp by jorjatis (@jorjatis) on CodePen.
GreenSock Posted January 9 Posted January 9 You set the end of your ScrollTrigger to +=totalSlidesHeight but you’re only calculating that value ONCE at DOMContentLoaded, thus it’ll never get recalculated properly when you resize. I assume that value should change. So to correct that, you could create a function like: function getTotalSlidesHeight() { return slideContent.offsetHeight * numberOfSlides; } And then use it like this: end: () => `+=${getTotalSlidesHeight()}` It looks like every time the scroll position changes, you’re looping through EVERY slide and creating an entirely new timeline that’s animating the exact same elements over and over and over again (conflicting, duplicate animations). Tons of extra work that hurts performance. It also might mess up calculations because you don’t take care of those animations when the ScrollTrigger refreshes (they just keep going). I don’t have time to dig into all your logic, but it also looks like you’re altering the lastSlide.classList when the ScrollTrigger completes, but you’re not resetting that during a ScrollTrigger refresh, so maybe that’s throwing calculations off.
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now