Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Nitro Interactive

GSAP + React - GSAP Defaults (Duration)

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

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.

  • Like 4
Link to comment
Share on other sites

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.

 

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 3
  • Thanks 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

That's a really good tip 🥳

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