Jump to content
Search Community

GSAP + React - GSAP Defaults (Duration)

Nitro Interactive test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

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?

Link to comment
Share on other sites

  • Solution
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

 

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

  • 10 months later...
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? 🙏

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