Jump to content


Need Animation to Start After Completion of Separate Animation Toggled by Click

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 all,


My issue here is a bit two-fold. I've been making steady progress on this project, but I've hit another wall.


The first issue is that since I've added my Timeline for the second animation, the animation opens immediately on browser load.


The second issue is that my Timeline doesn't seem to be running the .fromTo() I've defined for it.


So what I'm attempting here is to define the first animation, define the second animation, toggle the first with click, toggle the second with timeline onComplete of the first animation, and then to be able to reverse the whole sequence on click again. I've made a mess of my code I think and I'm having a hard time piecing it all together. 


I feel slightly bad about having so many questions/requests for assistance. If I'm asking an inappropriate amount or types of questions please feel free to let me know, I wouldn't want to violate any forum rules.


Whatever you can help me with I will greatly appreciate and I thank you in advance.

See the Pen aVeYaO by msolaridesign (@msolaridesign) on CodePen

Link to comment
Share on other sites

No we don't have any quota for questions, so feel free to ask questions whenever you get stuck. Just it makes it easy for us when someone reads/follows tutorial when we suggest something. So if are getting stuck on new issues or something is complex for you to understand everybody here will be happy to help. And sometimes it is easier to ask for help rather than banging your head for hours, so don't worry about it.


As for your question, you are using a tween rather than timeline. You can always set it's 'paused' property to true so it won't auto play.


Your fromTo tween isn't playing because you aren't calling that fadeIn function anywhere in your code.


See the Pen xPvjwR?editors=0010 by Sahil89 (@Sahil89) on CodePen


If you haven't seen already you should go through these videos which will help you a lot,











  • Like 4
Link to comment
Share on other sites

@msolari Another issue that puzzled me is, you are defining a 'tlcA' timeline which basically has no duration. So as soon as page loads, the 'tlcA' onComplete callback is called which animates the main animation.


For this animation you don't really need to use any callbacks, you can do same thing by using one timeline. Though I don't see any benefit of setting opacity here.


Well, just to add a little more, it also helps us a lot when demos are simple and all ids, classes and variable are have descriptive name. Again, feel free to ask any questions.


See the Pen wPVjOw?editors=0010 by Sahil89 (@Sahil89) on CodePen



  • Like 3
Link to comment
Share on other sites

These videos are bomb.


And your example helped me fix my issue well.


My .fromTo and .reverse() needed to be below my Tween and it works great now. I was defining too many variables and I lost sight of my goal.


You really helped me get back to basics here.


Thanks so much :)

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