How do i use a single timeline in multiple components in react js

[Ram Ji]

Hey, so I'm creating a website where I need a timeline for multiple components, I'm trying to use the redux toolkit for the timeline but I can't figure out the way, how to implement the code, please help me with this. Thanks

[GSAP Helper]

Hi there! I see you're using React -

Proper cleanup is very important with frameworks, but especially with React. React 18 runs in strict mode locally by default which causes your useEffect() and useLayoutEffect() to get called TWICE.

 

Since GSAP 3.12, we have the useGSAP() hook (the NPM package is here) that simplifies creating and cleaning up animations in React (including Next, Remix, etc). It's a drop-in replacement for useEffect()/useLayoutEffect(). All the GSAP-related objects (animations, ScrollTriggers, etc.) created while the function executes get collected and then reverted when the hook gets torn down.

 

Here is how it works:

const container = useRef(); // the root level element of your component (for scoping selector text which is optional)

useGSAP(() => {
  // gsap code here...
}, { dependencies: [endX], scope: container }); // config object offers maximum flexibility

Or if you prefer, you can use the same method signature as useEffect():

useGSAP(() => {
  // gsap code here...
}, [endX]); // simple dependency Array setup like useEffect()

This pattern follows React's best practices.

 

We strongly recommend reading the React guide we've put together at https://gsap.com/resources/React/

 

If you still need help, here's a React starter template that you can fork to create a minimal demo illustrating whatever issue you're running into. Post a link to your fork back here and we'd be happy to take a peek and answer any GSAP-related questions you have. Just use simple colored <div> elements in your demo; no need to recreate your whole project with client artwork, etc. The simpler the better. 

[Ram Ji]

Hey @GSAP Helper I'm already using the useGSAP hook I'm requesting can you please provide me the code of redux slice and please explain how can I use redux toolkit to manage my timeline across my project in different components.

[Ram Ji]

Hey @GSAP Helper @Rodrigo here is a minimal demo https://stackblitz.com/edit/vitejs-vite-xrykyh?file=src%2Ffeatures%2FtimelineSlice.js please check in this demo, the timeline is playing the animation of 2nd component which is purple box in beginning after the 2nd component animation is done, then it is playing the 1st components animation which is red box, and also check my timelineSlice is it good if it can be better then suggest something it would be really helpful.

[Rodrigo]

Hi,

 

The problem is not related to Redux or state management, but in the order of operations.

 

In React the component tree is rendered from the farthest child up to the main root component, so when you have this in your main app:

<div className='w-full min-h-svh flex flex-col items-center justify-center bg-zinc-900'>
  <Box1 />
</div>

And this in your Box1 component:

<div ref={container}>
  <div className='red-box w-40 h-40 bg-red-500 mb-10'></div>
  <Box2 />
</div>

Box2 is rendered first and that particular instance is added to the timeline, then Box1 is rendered and that animation is added to the timeline, so the timeline plays the elements in the right order.

 

In order to make this work the way you want your app file should have both Box components in the order you want the animations to happen:

<div className='w-full min-h-svh flex flex-col items-center justify-center bg-zinc-900'>
  <Box1 />
  <Box2 />
</div>

That seems to work the way you intend.

 

Hopefully this helps

Happy Tweening!

[Ram Ji]

It worked, so there is no problem with my redux slice? or is there a better way to make a slice for GSAP timeline. Please suggest.

 

And Thanks a lot man I really appreciate this community and all of you guys.

[Rodrigo]

The slice seems to do what's supposed to, so no suggestions really.

 

Happy Tweening!

[Ram Ji]

Alright thanks.