Control a timeline with a slider

[ChrisGiggles]

Hi!

I have a slider that I want to control a timeline with.

The slider should tween to a new position when a button is clicked. When this is done, a timeline is played from label "x" to label "y".

I'm running into some trouble trying to conceptualise how this is going to work though.

 

Right now I have added the sliding tween to the same timeline as the rest of the elements and it doesn't work. I understand why it doesn't work but I have trouble figuring out what to use instead. 

 

This codepen is from my latest attempt, I've commented every line so it's easier to understand the code: 

 

Here's a pen with my first prototype where the sliding part works as expected: 

See the Pen VvZZWw by chrisgiggles (@chrisgiggles) on CodePen

See the Pen LpPPYq by chrisgiggles (@chrisgiggles) on CodePen

[Carl]

Sorry, but I'm really struggling to understand what you need help with. 

My best guess is that you need separate tweens for moving the slider around and another timeline that tweens from label x to y. However I don't know where those labels or timelines are.

From what I gather from one of the demos, you were giving each slide its own animation timeline somewhere and that seems to be the right path to go down.