Share Posted July 13, 2021 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 More sharing options...
Share Posted July 13, 2021 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. 4 Link to comment Share on other sites More sharing options...
Author Share Posted July 15, 2021 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 More sharing options...
Solution Solution Share Posted July 15, 2021 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 4 1 Link to comment Share on other sites More sharing options...
Author Share Posted July 15, 2021 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 More sharing options...
Share Posted July 15, 2021 That's a really good tip 🥳 Link to comment Share on other sites More sharing options...
Share Posted June 11 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 More sharing options...
Share Posted June 11 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? Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now