How to animate fixed div with multiple triggers

[filips]

I want to animate a fixed div's width using sections as a trigger. The issue I'm running into is that on enter back the animation doesn't start from the width that the div was in after last change but rather jumps to the initial width and then animates.

See the Pen VwXxRWg by FilipSipos (@FilipSipos) on CodePen

[GreenSock]

I noticed several problems: 

1. You were literally trying to animate the "end" property of the various elements. There is no such thing. Were you trying to set the end of the ScrollTrigger?
2. You were animating the SAME element with a bunch of ScrollTrigger-based tweens which are always rendered immediately by default, so I assume you forgot to set immediateRender: false
3. If I understood you correctly, you want to make the tweens dynamically pick up where the current size is, thus you should create them dynamically rather than pre-baking 1 tween for each and restarting them. Otherwise, they'll always play to/from the same values each time. That'd be bad, though, if someone scrolls more quickly and interrupts a previous one. 

Perhaps you wanted something more like this?:

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

 

Nice and simple

 

Happy tweening!

[filips]

Oh I wish I had asked sooner😅🤣 thanks that is exactly what I was trying to create!