Ishan Shishodiya

Suppose I have a section which has a few elements belong to a "circle" class with their own sets of animations defined in a useEffect hook in the very same component itself. Then I have another component with different elements belonging to the "circle" class but with their own set of animations that are different from the first ones defined in their own useEffect hook in the component itself. Would these two animations interfere with each other and also target the animations in the other component or would it be scoped properly? Currently because I am not sure about this I am just using contexts to scope the animations within each component.

@mvaneijgen Thanks for the answer it really helped out. Although I have another question regarding the same countdown. You can see in the code pen code that the final animation that translates the screen by 100% on the X axis has the ease ""back.out(1.7)". By adding that there I expected the screen to have a little back animation when the translation was over but I can't see that in effect. If I has the translation be something like 90% I can see that the little back animation occurs on the right side instead of the left. Any ideas on how to fix this too?

I have this count down animation I created which once reaches zero gets shifted to the right. Here I am using delay for the container shifting animation but it would be more convenient for that animation to trigger after the number appearance animation is completed. I tried using "-=6.3" instead of that delay in a timeline but it didn't really work. Any ideas on how to implement this?

@Rodrigo I won't say that those two are completely related as the comment is a Redux Toolkit issue but yeah both originated from the same issue of wanting to share one master timeline across multiple components. In the code I have working right now I have done something similar to the example you gave and it works as I wanted it to. You can view it in this codesandbox. I used prop drilling to pass down the master timeline to the children component as Cassie's article suggested and then just did something like this to add the timeline to the master timeline as shown in Cassie's example codepen in their article - const FirstSection = ({ tl }: Props) => { useEffect(() => { if (tl) { const hero = gsap.timeline({ delay: 1 }); hero.from(".hero-text", {}); tl.add(hero); } }, [tl]); return <JSX code> }; Then I just call these components in the main parent component and the sub-timelines like hero timelines get added in the sequence get added to the master timeline in the parent. The prop drilling method works nice when we don't have to drill the prop too many times, but I was wondering if I could store the master timeline as a global state and then call it in all these children. I tried doing it using RTK where I created a timeline slice and stored gsap.timeline as the initial state but ran into the error of "Too many recursion". That post I made there is more of an RTK and GSAP so I think that that post and this post are two different things.

@Rodrigo I need a master timeline for my homepage. Because the homepage itself is split into multiple components, a master timeline would be really helpful in handling how to sequence the animations. That's why I was trying to store a timeline as a global state. I went ahead with redux and tried using redux tookit to store a gsap timeline as a state like you suggested in this post but am running into the error "Too much recursion" import { createSlice } from "@reduxjs/toolkit"; import gsap from "gsap"; const initialState = gsap.timeline(); const timelineSlice = createSlice({ name: "timeline", initialState, reducers: {}, }); export default timelineSlice.reducer; This is what my timelineSlicelooks like, any suggestions on what to do? I also saw a globalTimelinein the docs can that be of any help here?

I found a method to do this and it involves creating a mater timeline tland then adding child timelines to this for every animation. To keep the code organized I make functions for each timeline in which I do something like this - const heroAnimation = () => { const heroTl = gsap.timeline({ delay: 1 }); heroTl.from(".hero-text", {<animation params>}); heroTl.to(".hero-text", {<animation params>}, "-=2.5"); tl.add(heroTl); }; I do this for every animation I want to create and then at the end add them all to one useEffect- useEffect(() => { tl.set(pageRef.current, { visibility: "visible" }); heroAnimation(); scrollGuideAnimation(); }, []); The result does seem to work the way I expected it to. I'd still love some suggestions though.

I have a useEffect hook which does some animations which goes like this - useEffect(() => { const ctx = gsap.context(() => { const tl = gsap.timeline(); tl.from(".hero-text", { opacity: 0, x: "-5vmin", delay: 1, duration: 1, ease: "expo.out", stagger: 1, }); tl.to( ".hero-text", { letterSpacing: "0.1em", stagger: 0.9, }, "-=2.5" ); }); return () => ctx.revert(); }, []); I have another animation that I want to run after this animation has ended, but if I add it inside the same useEffect hook it'll make the code a bit messy. I can definitely have a completely different useEffect hook and write the animation there but that way I won't be able to use the timeline defined for this animation. Currently I am just using a delay but I feel like that ain't the best way of achieving the result I want. Is there a way I can add an animation to the same timeline while making sure that the code ain't really messy. Can contexts help in this? Having the animations inside useEffect ain't necessary for my purpose so am open to any sort of suggestions that can be implemented in React, or specifically NextJS.

Tell me if I am wrong, but we can change different properties inside a property itself by just passing it as the pointer like you passed ref.current.rotation in gsap.to to change the "x" property on rotation?

import gsap from "gsap"; import MorphSVGPlugin from "gsap/dist/MorphSVGPlugin"; gsap.registerPlugin(MorphSVGPlugin); I have the above code written in a NextJS project, but am getting the error - Module not found: Can't resolve 'gsap/dist/MorphSVGPlugin' I saw in one forum post that this error was occurring because MorphSVGPlugin is a Club GreenSock plugin, so instead tried importing it from `gsap-trial` instead of `gsap` but still had the same error. What can be done here?

I can see a types folder inside the gsap module but cannot import it using import {} from "gsap/types" as it shows an error that "gsap/types/index.d.ts" is not a module. So instead I tried importing it standalone using import "gsap/type" and then doing the code below but am confused on what to do next? // ts.config.json { "types": ["gsap/types"] }

I am using GSAP in React with Typescript and was wondering how I can store the GSAP tween variables in separate variable. I can still do something like the code below but it'll be nice if I am able to access the type for these tween variables, this way I'll be able to use Intellisense for easier code writing. const tweenVar = { opacity: 0, x: 250, ease: "sine.out", duration: 1, }; gsap.from(pageRef.current, tweenVar); On hovering over fromI can see the type to be something like gsap.TweenVars but am not able to import it into the file.