What is the best way to trigger an animation on a react element from another element?

[poogster]

So I have a overlay element that i want to animate(it basically sweeps over the screen). But i want the animation to be triggered by a click on my nav bar. What is the best way to trigger this animation? Note they are 2 seperate components

 

[GSAP Helper]

I'm totally the wrong person to ask because I'm not very familiar with React, but in general it seems like the whole concept of components involves making things self-contained, thus you could expose a method on a component's instance that you'd call from the other component. So, for example, ComponentA has a .expand() method you'd call and that's where your GSAP code would be. You wouldn't want ComponentB to externally animate ComponentA because that seems messy. The component itself should typically have its own animation code and you'd just trigger it via a method. 

 

Does that help? 

 

If you still need help, please create a minimal demo, like in StackBlitz or CodeSandbox that clearly illustrates the challenge you're facing with as little code as possible. Please don't include your whole project. Just some colored <div> elements and the GSAP code is best.

 

Here's a  React starter template that you can fork.

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

 

Good luck!

[Rodrigo]

Hi,

 

We also have a React template for using GSAP in page transitions (by the fact that you mention that you want to trigger the animation by clicking a navbar element leads me to think that you might be after something like that):

https://stackblitz.com/edit/react-6rzfpp?file=src%2FApp.js

 

Happy Tweening!