Jump to content


Chrome Dev Tools - animation pane

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


My apologies if this has already been asked (I have exhausted all possible searching avenues).


Can animations created with greensock be debugged within Chrome's animation pane?  Currently, it 'listens for animations,' but never hears anything..


It's not the end of the world if it doesn't (Greensock seems to be a bit on the awesome side).  I'm guessing that Chrome's tool might only be able to manipulate and graph 'pure' CSS animations, rather than interpreting the 3d transforms that Greensock uses to manipulate elements consistently/simultaneously.





Link to comment
Share on other sites

BTW you can mimick those dev tools features just from console.

  1. Pause from debugger and it will pause ongoing animations.
  2. or enter TweenMax.pauseAll() in console and it will pause all ongoing tweens/delayed calls.
  3. TweenMax.resumeAll() to resume everything.
  4. TweenMax.globalTimeScale(0.5) to slow down everything that GSAP does and TweenMax.globalTimeScale(5) to speed up.
  • Like 4
Link to comment
Share on other sites

Brilliant!  Thank you for two extremely useful answers.  I feel a bit duhh for not starting from the possibility that GSAP had its own debug tools already, but such is life... :D

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