Jump to content
GreenSock

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

slowing down animations for debugging

Recommended Posts

so.. a technique that's quite common for debugging is just multiplying the animations duration to slow down the animation and debug it that way. 

 

Now with es6 imports/exports and having different animations in different files, it can be a bit annoying to manage these variables. 

 

I was wondering if there's perhaps an internal variable to multiply durations. 

 

Otherwise would suggest to add one to the gsap.defaults() function which simply multiplies the duration. 

Link to post
Share on other sites
const debugMultiplier = 1;
 
gsap.defaults({
ease: 'power2.in',
duration: 1 * debugMultiplier,
});

 

🤦‍♂️

 

edit: where did the delete forum-post function go? 

 

Obviously this wouldnt work with any animations with a different duration than default

Link to post
Share on other sites

You can set the global timeScale.

gsap.globalTimeline.timeScale(0.5);  // plays everything at half speed

 

1 hour ago, flowen said:

Now with es6 imports/exports and having different animations in different files, it can be a bit annoying to manage these variables. 

 

Seems like it should be super easy. Just export your variables from a single file.

 

variables.js

const debugMultiplier = 0.5;
...

export { debugMultiplier };

 

foo.js

import { debugMultiplier } from "./variables.js";

gsap.to("div", {
  x: 100,
  duration: 1 * debugMultiplier
});

 

  • Like 5
  • Thanks 1
Link to post
Share on other sites

Oh cool. Global timeScale. I didn't know that.

Link to post
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.

×