GSAP + React - GSAP Defaults (Duration)

[Nitro Interactive 7 Likes (Newbie)]

I saw in the documentation that it does not matter how many times you import and register GSAP plugins; I'm doing it for all of my components where I use it.  It gets loaded up to 12 times on one page (12 child components in the page, each using GSAP).  Does it matter how many times you set GSAP defaults within each child component?  Settings defaults in one seems to impact the other components.

 

Setting a default duration changed the duration of all tweens (it made them slower) across all components throughout a page.  Each tween has a duration set, so why would the default override the duration set within the tweens?  It's a default, shouldn't it work the other way around?

[elegantseagulls 1,266 Likes (Superhero)]

Hi @Nitro Interactive,
Can you provide an example of your setup? React should scope your timelines to each component, so the defaults for the specific timeline should be scoped the same, unless you're setting GSAP's global defaults.

[Nitro Interactive 7 Likes (Newbie)]

I am in fact setting global defaults with a leading 'gsap.defaults()'.  I was thinking these defaults were scoped to each component.  I did not realize I could also set defaults specific to each timeline.  Perfect.

 

[OSUblake 18,368 Likes (Superhero)]

1 hour ago, Nitro Interactive said:

I was thinking these defaults were scoped to each component.

 

Nope, gsap.defaults() is global, so you should probably only call that one time.

 

I would recommend this pattern to anyone who uses modules. Do all your plugin registration and GSAP configuration in a single file like so.

 

import { gsap } from "gsap";
import { Draggable } from "gsap/Draggable";
import { TextPlugin } from "gsap/TextPlugin";

gsap.registerPlugin(Draggable, TextPlugin);

gsap.defaults({
  duration: 2
});

export * from "gsap";
export * from "gsap/Draggable";

 

Now import gsap and whatever else you need from that file. This eliminates the need to register your plugins in every file, and the defaults are configured in a centralized place.

 

https://codesandbox.io/s/gsap-defaults-ujf58?file=/src/App.js

 

[Nitro Interactive 7 Likes (Newbie)]

Perfect, this is really good advice.  I began setting up these defaults in my main layout.js file --- so I believe that would be scoped but this will ensure it's properly loaded everywhere it needs to be.

[Cassie 3,985 Likes (Superhero)]

That's a really good tip 🥳

[kvncnls 4 Likes (Newbie)]

On 7/15/2021 at 7:32 AM, OSUblake said:

 

Nope, gsap.defaults() is global, so you should probably only call that one time.

 

I would recommend this pattern to anyone who uses modules. Do all your plugin registration and GSAP configuration in a single file like so.

 

import { gsap } from "gsap";
import { Draggable } from "gsap/Draggable";
import { TextPlugin } from "gsap/TextPlugin";

gsap.registerPlugin(Draggable, TextPlugin);

gsap.defaults({
  duration: 2
});

export * from "gsap";
export * from "gsap/Draggable";

 

Now import gsap and whatever else you need from that file. This eliminates the need to register your plugins in every file, and the defaults are configured in a centralized place.

 

https://codesandbox.io/s/gsap-defaults-ujf58?file=/src/App.js

 

Is this still the best practice? Would you happen to have a new way of doing things or additions since this post? 🙏

[GreenSock 16,656 Likes (Superhero)]

I'm not aware of any change to that advice, no (but I'm not a React guy). 

 

Are you running into a problem? Did you have a better pattern to suggest?