ScrollTrigger resizing issue on Vertical slider

[TheStiffler]

Hey everyone!

Loving ScrollTrigger, it works great but I'm wondering if you could help me with an issue that I've been having for the past week.

 

I'm trying to build a vertical slider inside of a pinned container. The main goal is that the user gets to the pinned element and then starts scrolling through the slides (with at most one slide displayed at each point in time). This is currently working correctly except when the user resizes the window in which the scrolling starts getting stuck in between slides. Looking at the markers, it seems ScrollTrigger loses track of the slide's start and end attributes even though I'm setting invalidateOnRefresh: true  on both the inner and outer container.

 

Not sure if I'm doing something wrong or if it's an issue with ScrollTrigger. Also open to any suggestions you might have for accomplishing this!

 

 

See the Pen qBpaBZR by theStiffler (@theStiffler) on CodePen

[OSUblake]

Welcome to the forums @TheStiffler

 

For invalidateOnRefresh to work, you need to use function-based values, so you would need to rework some of your stuff to be in a format like this.

end: () => `+=${slide.offsetHeight * 5 - slide.offsetHeight}`,

 

[TheStiffler]

Thank you for the feedback @OSUblake!

I made the changes according to your feedback so that the values update dynamically, however I'm still encountering the same issue. Is there something I'm missing?

When I resize the window the scrolling gets caught between slides and sometimes even skips some.

See the Pen mdprzBE by theStiffler (@theStiffler) on CodePen

[OSUblake]

Oh, I was just answering your question about invalidateOnRefresh, but there's several issues you need to look at, like setting the pinnedContainer...

 

Quote

Element | String - If your ScrollTrigger's trigger/endTrigger element is INSIDE an element that gets pinned by another ScrollTrigger (pretty uncommon), that would cause the start/end positions to be thrown off by however long that pin lasts, so you can set the pinnedContainer to that parent/container element to have ScrollTrigger calculate those offsets accordingly. Again, this is very rarely needed. (added in 3.7.0)

 

And you're animating trigger, (inner) which will of course be in the wrong position when it resizes. It's best to never animate the trigger element. Rather, animate something inside of it.