REACT - Passing a container animation down to a child component.

[Muggins]

Hi there. I have a project where in, the parent component is moved xPercent: 100% as the user scrolls. Inside that component are children components that I would like to add animations on based on the location of the left and right side of the element in relation to the left and right side of the screen (rather then start: top top end: bottom bottom I want start:left left end: right left ) I know in order to do this I need to provide the child component a "containerAnimation" (key) : "animationFromParentComponent" (value). My problem is that I can not seem to figure out how to pass my timeline (container animation) from the parent to the child successfully.  I think because the prop is passed to the child on first render it is null. I am passing "newTimeline" as a prop to section_hero child component to use as a container animation.  Any help would be awesome!

 

[Rodrigo]

HI @Muggins and welcome to the GSAP Forums!

 

First of all I'd strongly suggest you to check the documentation we have on working with GSAP in React environments:

https://gsap.com/resources/React

 

More specifically in our Advanced Guide we have this particular section:

https://gsap.com/resources/react-advanced#passing-down-a-timeline-prop

 

But I strongly suggest you to go in the order we have layed out for our users.

 

Finally the reason you're getting this error most likely is tied to the fact that in React child components render before their parents, so that timeline indeed (and expectedly) is null on the first render. You should use that as a dependency in the useGSAP hook and only when the timeline is not null and indeed a GSAP Timeline instance, create the ScrollTrigger instances with that as the container animation.

 

Finally we have a collection of GSAP & React Starter templates in Stackblitz, so you can fork one of those in order to create a minimal demo that clearly illustrates the problem you're having, just remember to not use your entire project, just a few elements.

 

Happy Tweening!

[Muggins]

Thanks I will look through those resources as well as try what you suggested.