Jump to content
GreenSock

Nye

Multiple Children Components with ContainerAnimation (React)

Recommended Posts

Hello!

 

Just discovered containerAnimation a few hours ago but ran into a bit of a snag with components. I have a ScrollTrigger successfully passing a container animation to a child as props, the setup went perfectly and the child animates when it should. However, I have 3 of these components that need to be animated as they pass into view. When The first child passes into view, the animation for all 3 components fire.

 

Curious if anybody has recommendations for how I might proceed with the desired effect. I know I'm missing a piece of the containerAnimation puzzle on this one but not quiet sure which one it is.

 

Sandbox here:

https://codesandbox.io/s/modern-sea-lqne48?file=/components/Slider.js

 

Please let me know if I can clarify further or beef up my sandbox!

 

Thanks,

Nye

  • Like 1
Link to comment
Share on other sites

Hello there!

 

If I log out index and st in your child components I'm getting index but then null for st.

So the issue is that the container tween isn't being passed through to the child components. Solve that and you'll be on your way. This part of our react article may help you.
 

 

Good luck! Pop back if you hit a wall.

  • Like 1
Link to comment
Share on other sites

Thanks for that Cassie, I'll dig through it! In the meantime, curious: If st was logged as null, but the first of the three animations still fired, how does this occur? Was the data being passed incorrectly and thus behaved strangely or is something else going on?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×