Jump to content


Draggable range timeline with varying container size

Go to solution Solved by OSUblake,

Recommended Posts

Hi there,


I am hoping someone can help with a draggable and timeline issue I am having.


I have reached out previously, which worked in the most part, and the resize event listener does keep the timeline and draggable progress in sync:


My new issue here is the timeline container and range needs to be responsive on resize due to the change in content and layout.


I was wondering the best way to go about this. In my codepen attached you'll see I have added the timeline to the updateMapper function, but this causes the timeline to break and the range/draggable becomes unresponsive 😕.


Any ideas would be welcome please. Ideally i'll have a way to update just the timelines y value on resize. I don't want to put the user back to the begginging on resize either as some of the timelines can be quite long.


Thanks in advance :)



See the Pen RwVQaGG?editors=1010 by jackkemm (@jackkemm) on CodePen

Link to comment
Share on other sites

  • Solution

Hi Jack,


Your updateMapper function is adding additional animations to your timeline when it resizes. You can just clear the timeline out and start again.


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


  • Like 2
Link to comment
Share on other sites

Hi Blake,


Had a feeling it was to do with the way I was using the timeline but wasn't. That works perfectly.


Thanks for the help!



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.