Chrome Dev Tools - animation pane

[RBJames 2 Likes (Newbie)]

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.

 

Thanks,

 

James.

[Sahil 2,541 Likes (Superhero)]

Ya those are for pure CSS animations, maybe you can use GSDevTools to debug what you are doing.

 

https://greensock.com/gsdevtools

 

 

[Sahil 2,541 Likes (Superhero)]

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.

[RBJames 2 Likes (Newbie)]

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