Jump to content

Jeff Pang

Timeline .set() does not respect tween position

Moderator Tag
Go to solution Solved by Carl,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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") 



  • Like 2
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.