How to make the timeline activate with each click of the arrow?

[Masohas]

Why the timeline is run only once after pressing the arrow? I would like it to be executed every time you click right arrow.

I tried different timeline layouts in the code but it didn't help.

the arrangement of the subtitles on the computer looks better :D

 

See the Pen GRQLBgy by jarek-babiak (@jarek-babiak) on CodePen

[mvaneijgen]

A slider seems simple, but when you dive deep into it I found it to be rather complicated.

 

I wanted to make as slider base that I could use as a starting off point and it took me a lot of trial and error to get something  use able .

 

Here it is. It creates a new animation on each click, this way it can animate between any two slides (the first and the 4th for instance). It also waits until the animation is finished before firing a new one.

See the Pen GREebPK by mvaneijgen (@mvaneijgen) on CodePen

 

And here is one with more complicated animation, but the same base.

See the Pen YzQZBgr by mvaneijgen (@mvaneijgen) on CodePen

 

Hope it helps get your slider of the ground 

[GreenSock]

To answer your specific question, @Masohas, it's because your arrow simply calls play() on the timeline that animates the "x" to exactly "-100%". So let's say you click it once...now x is at -100% when that's done and the playhead of the timeline is at the very end. Now if you play() again, where would you expect the playhead to go? It's already at the very end. There's nowhere left to go. And even if there was, x is already at 100% so if you tell it to go to 100% again, it's already there, so it would animate from 100% to 100% (go nowhere). 

 

It's probably best to create the animation on the fly each time you click. Like @mvaneijgen said, there's actually a fair amount of logic necessary to put together a slider well. You might want to look at the helper function in the docs for the seamless looping on the x-axis. 

 

Good luck!