Jump to content
Search Community

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

martis test
Moderator Tag

Recommended Posts

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!

  • Like 1
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...