Jump to content
Search Community

Fixed position element on timeline

Oleksandr07 test
Moderator Tag

Recommended Posts

It is a bit weird to wrap your head around. Normally in GSAP things work based on durations, but with ScrollTrigger that all gets thrown out the window (not really it still matters if you have multiple animations), but in ScrollTrigger the whole animation gets played over the scroll distance you've set.


your .rect animation gets the default duration eg 0.5 seconds, but your text rotation animations each get a duration of 1 which is twice as long, so the .rect is already at the bottom at half the speed the list times get animated. I've now set its duration to 2 which is the whole duration of the two list animations. I'm not sure what the pos position parameter is calculating, so maybe it needs to be even more. 


Hope it helps and happy tweening! 


See the Pen bGQygvR?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

  • Like 1
Link to comment
Share on other sites

I removed the 'd' character.


I didn't 'fix' your issue, I explained you want the problem was. If you compare the two, you can see mine is a lot slower. That is due to the duration you give your tweens, so you have to give your .rect the same duration als you take for all your list items. Sorry I don't have time to debug everything for you, so pointing you in the right directions is all I can do for now. Good Luck!

  • Like 2
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.
  • Create New...