Jump to content


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

Recommended Posts

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

Link to comment
Share on other sites

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 

  • Like 2
Link to comment
Share on other sites

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!

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.