Jump to content
GreenSock

Hugo Priet

Keep position/progress of scrub animation on resize

Recommended Posts

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

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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 🙏.

Link to comment
Share on other sites

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.
×