Jump to content
Search Community

slowing down animations for debugging

flowen test
Moderator Tag

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 comment
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 comment
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 6
  • Thanks 1
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...