Nye Posted July 3, 2022 Share Posted July 3, 2022 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 1 Link to comment Share on other sites More sharing options...
Cassie Posted July 3, 2022 Share Posted July 3, 2022 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. 1 Link to comment Share on other sites More sharing options...
Nye Posted July 4, 2022 Author Share Posted July 4, 2022 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now