Is there a way to recreate this responsive timeline without a jump?

[martis 32 Likes (Newbie)]

see codepen 

See the Pen KKRBGEN by martis (@martis) on CodePen

[GreenSock 18,301 Likes (Superhero)]

Well the simplest way is to just animate x to "100vw"

See the Pen rNvrQxd?editors=1010 by GreenSock (@GreenSock) on CodePen

 

But you can also temporarily store the current progress, revert the timeline, recreate it, and restore the progress: 

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

 

Be careful because your original demo was creating an entirely new infinitely-repeating timeline on every single "resize" event (which can happen a ton of times while the user drags/resizes) and you never killed/reverted the previous ones, so you ended up with a bunch of animations competing with each other. Definitely not great for performance. 

 

If you're doing responsive animations, you'll love the new gsap.matchMedia() method: 

https://greensock.com/docs/v3/GSAP/gsap.matchMedia()

 

 

Have fun!

[martis 32 Likes (Newbie)]

Thanks Jack! In the first example, how could I apply some math like

x:"100vw" - 100

 

 ?

[GreenSock 18,301 Likes (Superhero)]

Just animate xPercent too: 

See the Pen yLjxvBm by GreenSock (@GreenSock) on CodePen

 

It's kinda magical that you can combine them - it's quite useful in cases like this.