Jump to content
Search Community

Main timeline not keeping second timeline tween/css in click

TopGUN121 test
Moderator Tag

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

Hi Everyone,


Been using greensock for a couple of months now.  I finally got us to upgrade to the newest version and some things are different.   My issues is we have a main big timeline that our animation runs on.  There are points in it when we pause the timeline and people need to click on stuff and other animations happens.  After they click everything they need to we restart the main timeline.  The click functions have their own timeline with tweens in them.  


Well on the newer version we are using, when we resume the main timeline it ignores the css/tweens that happen in the click timeline.  It restarts like the clicks animations never happen.  Before on the older version we used that didn't happen.  I'm seeing if there is a way to have a main timeline and have it keep the css and animtaion end tween from click on resume of the main timeline.  I hope this makes sense.  Thanks.


Link to comment
Share on other sites

ok, update on this.  I was playing around and saw one of the animations i made did not change.  Then looked at the main timeline and saw the .set i was using at the start of the timeline was overriding the the click timeline tweens when main timeline resume.  Is that normal?   Before the .set just worked wherever i placed it in the timeline and the click timelines wouldn't be effected by it.  (i have the .set at the start since they can go back to a section in the animation)  i change the .set to a .to and still having it override the click timeline.  

Link to comment
Share on other sites

Glad, you got it sorted. Thanks for creating the codepen too!


Just so you know, we recently added a new method to TimelineLite called addPause() so that you no longer need a callback to pause the timeline.


.to($("#box"), .5, { left:"400px"})
.to($("#box"), .25, {top:"-=50px"})
.to($("#pause"), 0.25, {display: "block"})
.to($("#box"), .25, {top:"-=200px"})
  • 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.
  • Create New...