[How to pause timeline in between animation]

I am unable to figure out how to immediately pause,stop or reset a timeline when the it is a playing. I have tried several variations which does not seem to work.

- tl.pause()
- tl.pause(0,false)
- tl.pause(0,true)
- tl.seek(0)
- tl.seek(0,false)
- tl.seek(0,true)
- tl.kill()
- tl.invalidate().pause()

See the Pen ORexex by jeffpang (@jeffpang) on CodePen

[Timeline .set() does not respect tween position]

Cool! Thanks for your help!

[Timeline .set() does not respect tween position]

I have a animation sequence where I would like be broken down into steps and proceeding with each step by button click. And at the beginning of each steps before animating, .set() is used to initialize css properties before starting the animation. However, Timeline does not seem to respect the positions and proceed to set the next step's property just right after stopping at the end. e.g

 

On 1st button click:

Animate Step1 -  Set opacity to 0.1 and then animate sequence till the end of step 1

 

On 2nd button click:

Animate Step2 - Set opacity to 1 and then animate sequence till the end of step 2

 

However, on the 1st button click, opacity is set to 0.1, animation proceed till end of step 1 AND then immediately set opacity to 1.

 

Can someone please point out what I am doing wrong? Thanks

See the Pen RGOoWo by jeffpang (@jeffpang) on CodePen