Jump to content
Search Community

Scrolltrigger pins but overlaps content when refresh

Jorjatis
Moderator Tag

Recommended Posts

Jorjatis
Posted

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!

 

image.thumb.png.578f5caf8463adf1def39a7e5e767e53.png

See the Pen qEWxaPp by jorjatis (@jorjatis) on CodePen.

GreenSock
Posted

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. 

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...