Timeline .set() does not respect tween position

[Jeff Pang]

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

[Carl]

Hi and welcome to the GreenSock forums,

 

Thanks for providing the clear demo. Very nice.

 

From what I can tell, things are working properly because you have the endStep1 label and the step2 label and the set() all inserted at the exact same time in the timeline. So when the playhead reaches endStep1 (it also lands on step2) and also fires the set() which sets the opacity to 1.

 

I think the best solution here is to move the step2 label and the set() just a tiny bit after the endStep1 label like so:

 

 .add("step2", "+=0.001")
  .set(logo, {opacity:1},"step2") 
  .to(logo,1,{left:400},"step2")

 

http://codepen.io/GreenSock/pen/JRVNRo?editors=0010

[Jeff Pang]

Cool! Thanks for your help!