Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Chrome Dev Tools - animation pane

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.