Jump to content
Search Community

Can't replay the animation when GSDevTools is created

POG test
Moderator Tag

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,

 

i have a replay button added which calls myAnimation.play(0) which works fine, when GDevTools isn't created.

If GSDevTools is created and the replay button is clicked, all added assets get set to opacity: 0 and visibility: hidden and the play head isn't set to the beginning. Any ideas why this happens?

 

Best
Peter

Link to comment
Share on other sites

See the Pen EBLvQg by PointC (@PointC) on CodePen

 

I assume that's the correct behavior since DevTools takes control of everything. I've never tried any timeline control buttons with GSDevTools because I just control everything with the built-in DevTool controls while debugging which is the beauty of using DevTools.

  • Like 2
Link to comment
Share on other sites

Hi Craig,

 

interesting, i used it also for debugging options on a more complex animation on our website, which was really helpful to control and adjust the animations.

I only expected that tl.restart() or tl.play(0) restart also the animation, even when GSDevTools are hooked as controller into the animation.

My problem was only that i run into this issue and thought first that something was wrong with my frontend stack or how i integrated the replay function.

 

As said, when i turn off GSDevTools, also my replay button work as it should be. When this is the normal behaviour i don't care any further to get it to work.

I mean i can still bring the timeline to the root of the window and check the last step with my replay button via chromes console and replay the last part from there.

 

Thx

Peter

 

 

 

Link to comment
Share on other sites

One other tip: if you only call GSDevTools.create(), it's global so it tries controlling EVERYTHING which can be challenging especially when you're creating new tweens & stuff. It's often better to wire it to a particular animation like: 

GSDevTools.create({
    animation:yourTweenOrTimeline,
    globalSync:false //now it only cares about your one animation, nothing global!
});

 

  • Like 3
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.
×
×
  • Create New...