Keep position/progress of scrub animation on resize

[Hugo Priet]

Hi, I'm trying to animate cards on horizontal scroll inside a dom element (not the viewport):

 

I have a single timeline and a scrolltrigger with a dom element (container) as scroller.

The animation of the cards works with the scrubbing perfectly, but when I resize the screen, the start position for the animation

seems to shift and offsets the whole thing. I tried setting a function for the start value, and tried with the infos on the following thread,

but I can't seem to resolve the issue.

Any help greatly appreciated!

Cheers.

See the Pen QWKvyeB?editors=0010 by smoothdev35 (@smoothdev35) on CodePen

[ZachSaucier]

Hey Hugo. Thanks for the minimal demo  

 

First off, you're making one of the most common GSAP mistakes: not setting all your transforms with GSAP for elements that you're animating with GSAP. 

 

Second, you need to either set a trigger for your ScrollTrigger or set the start and end based on the scroll length of your scroller. I opted for the second option in the demo below.

 

Third, you need to add some code to try and keep track of the progress. I assume you tried doing that but removed it after you couldn't get it working? I did notice that the target of the .maxScroll() needs to be an element, not just a selector string. Perhaps that's what got you?

See the Pen YzGVGvw?editors=0010 by GreenSock (@GreenSock) on CodePen

 

It might make sense to use a loop to create your timeline, especially if the number of cards might change at some point. You can handle the special cases of the first and last cards inside of the loop.

[Hugo Priet]

Hi Zach, thank you for the details. The main issue I can see now with your solution available (except for the common mistake 😅, my bad)  is that I didn't know how to use the end function with maxScroll for the 'dynamic' calculation. Thank you very much for helping me out 🙏.