Pause a timeline

[freuxdesbois]

Hi there, 

Something I don't get with the timeline, it's the pause function... In the pen linked, I tried to paused the Timeline after step1, but it also plays step2.... How can I pause my timeline after each step then?
 

See the Pen oazLOK by freuxdesbois (@freuxdesbois) on CodePen

[Carl]

Hi,

 

Thanks for the demo.

 

I think you want to use addPause() here

 

tl.addLabel('step1')
.to('.red', 0.5, {width:250})
.addPause()
.addLabel('step2')
.to('.blue', 0.5, {width:450});

 

See the Pen rqMMrE?editors=0010 by GreenSock (@GreenSock) on CodePen

 

you use pause() to pause a timeline at any time. 

The way you were using it you were pretty much pausing it as the timeline was being created.

 

addPause() inserts a pause into a timeline at a specific point in time.

 

more info here: https://greensock.com/docs/TimelineLite/addPause()

[freuxdesbois]

Awww thanks for the explanation, I feel less stupid
The difference is subtle but crucial

[freuxdesbois]

Awww thanks for the explanation, I feel less stupid
The difference is subtle but crucial


Ok, another question related to this, sorry.
So I added a reverse button, and if I push it let's say 3-4 seconds later than step1, the blue square flashes then disappear...
This is tricky because it doesn't seem to happen everytime...
Is there a way to avoid this flash thing?
 

See the Pen jeVbZM by freuxdesbois (@freuxdesbois) on CodePen