How to add timeline to context from React child component?

[Romanus]

Hello! I am using React.
In the App component, I create a context.
In a nested Button component, I create a timeline. How to add this timeline to context?
I tried to declare context in useRef and pass it to the button component. But it caused me a lot of errors. How to do it right?

See the Pen bGKXPYM?editors=0010 by Ukuus (@Ukuus) on CodePen

[alig01]

Hey, 

 

you created the reference, but forgot to assign it to a component. 

Additionally, context has an add method for exactly these cases (docs), but it shouldn't be passed to child components (detailed explanation).

ctx.add(() => {
  gsap.to(...); // now all these get added to the Context.
  gsap.from(...); 
});

 

I've quickly created a codepen where you can look at how the passing between components could be done.

See the Pen OJwLPvq?editors=0010 by alig01 (@alig01) on CodePen

 

In addition, I can recommend you these articles. There is a lot of useful information available in them.

 

Hope this helps

[Rodrigo]

Hi,

 

This in fact was a source of some debate within the team, in order to find the best possible approach for this situation, which is very unique on each case but is not at all an uncommon scenario. As you can see in the advanced guide, we recommend adding a GSAP Context instance on each child component. The reason? very simple you can't add a GSAP instance to a context one that hasn't been created inside that particular context. Sounds complicated but is quite simple, let me show you how it works:

const ctx = gsap.context(() => {
  // This tween is added to this GSAP Context instance
  gsap.to(".box", { x: 100, rotation: 360 });
}, scope);

const t = gsap.to(".box", { x: 100, rotation: 360 });

const ctx = gsap.context(() => {}, scope);
// Later on your code
ctx.add(() => {
  // We create a reference inside the add method for an existing GSAP Tween
  const another = t;
  // But this tween was not created inside this context
  // Therefore is not added to it, even if we reference it inside the context
});

So even though you can create a master timeline in your parent component and add GSAP instances created in child components to it, those will not exist in the parent's component's context instance. Also if they exist in a GSAP Context on the child component, when that component gets unmounted the specific animation is reverted and killed.

 

See the Pen poPWVpO by GreenSock (@GreenSock) on CodePen

 

This is quite unlikely to create a performance issue unless you create thousands of child components, in which case the performance problem will stem from rendering and not from the memory allocation of those extra instances.

 

Hopefully this clear things up. If you have more questions let us know.

 

Happy Tweening!

[layonthebeech]

Hey! Just stumbled upon this and I thought the gsap team recommended creating timelines as refs and not using state. Is there an example of this solution where the timeline is a ref instead? Thanks in advance!

[Rodrigo]

Hi,

 

We have a collection of GSAP and React starter templates in Stackblitz:

https://stackblitz.com/@gsap-dev/collections/gsap-react-starters

 

This demo uses the approach of storing a GSAP Timeline in a ref:

https://stackblitz.com/edit/gsap-react-basic-f48716?file=src%2FApp.js

 

Just to be clear, you can store GSAP Tweens/Timelines and other instances in state. The main thing to consider if is actually necessary to do that, like the need to pass said instance onto the JSX or as a prop to a child component. Normally that is not needed and instances are used inside the same component in the JS part of it (before the return statement of the functional component), so using a ref doesn't trigger a re-render that could be completely unecessary.

 

Hopefully this helps.

Happy Tweening!