Draggable range timeline with varying container size

[jackkemm 12 Likes (Newbie)]

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

 

Jack

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

[OSUblake 18,475 Likes (Superhero)]

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

 

[jackkemm 12 Likes (Newbie)]

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!

 

Jack