timeline Fixed position element on timeline

[Oleksandr07]

Hello, I need help. I can't figure out how to fix the black square in the position it is at the beginning of the item rotation animation in the third step. Now the square moving immediately to its final position.

See the Pen abQrOoW by Oleksandr07 (@Oleksandr07) on CodePen.

[mvaneijgen]

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.

[Oleksandr07]

You just made a mistake in the code https://i.imgur.com/Ck45hne.png, thereby disabling the item rotation functionality. If you fix your mistake, the problem with fixing the .rect block remains

[mvaneijgen]

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!