Jump to content


[Solved] toggle disable active rendering before animation?

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 guys, what the best way to toggle (disable and active) rendering before animation.
i have issue here if you fast click on interaction.

I need active rendering before show , and disable rendering after hide.
But if i fast click, i get issue.
hope i explained myself good.
Thank for help

See the Pen bQGqmQ by djmisterjon (@djmisterjon) on CodePen


See the Pen bQGqmQ by djmisterjon (@djmisterjon) on CodePen

Link to comment
Share on other sites

Problem here is that you are declaring tweens in both events with different delays, so lets say you click to make element visible and quickly clicked twice

  1. On first click, your element will start rendering after 0.1 second responding to 1st and 3rd click
  2. But after 0.9 seconds the tween with delay of 0.9 will start playing and disable rendering

To avoid that you can call killTweensOf to kill tweens on sprite.


See the Pen QJWvrj?editors=1010 by Sahil89 (@Sahil89) on CodePen


But a better approach would be to disable rendering after your animation completes,


See the Pen oQNWMM?editors=1010 by Sahil89 (@Sahil89) on CodePen


Also if you want to use 0 duration tweens then you can instead use TweenLite.set method. Finally, if your animation just goes and back like that then you can define once and toggle it back and forth.


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


Watch following video to know more about timelines and how you can take advantage of them to sequence your animations, there are more helpful videos on the channel.



  • Like 5
Link to comment
Share on other sites

ho we can mark this thread solved ?  a button or ?

Link to comment
Share on other sites

  • Sahil changed the title to [Solved] toggle disable active rendering before animation?

There is no button to mark topics as solved, some users just edit title to mark it. Though I like forums with "Solved" button.

  • Like 1
  • Thanks 1
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.