Nye

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?

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

Finally got around to monkeying with this. For anybody that finds this and wants to know what I ended up doing: I followed a different tutorial for creating the sine wave that allowed access to getters/setters I could use like Jack suggested: A wave object contains all the variables I wish to control. GSAP can then target wave.whatever and animate it however. Hope this helps! https://codepen.io/Nathan_Nye_92/pen/vYdPJEw

@noviedo That is a sick way to componentize that animation, love it! Thank you a million for throwing that bit in there, it will make my life going forward SO much easier. @Cassie Thank you as well for reminding me of selector, for some reason I was convinced it wouldn't target children of children despite it being akin to querySelector. Thank you both for your time in helping me work through that, appreciate it! Nye

Hello! I'm working with Next.js and have run into a logistical issue with Refs. https://codesandbox.io/s/nested-react-next-gsap-gvksxp ^^ In the sandbox I have my IndexPage mapping out a few items, problem being, almost half of the elements need animation, and this means doing const thing = useRef([]) thing.current = [] const addToRef = (el) => { if (el && !thing.current.includes(el)) { thing.current.push(el); } }; A bunch I have animated the text but targeting the rest of the stuff that needs tweens seems like a ton of work (unless I'm missing something) Is there a recommended approach for animating a bunch of children elements that are being mapped out? I'd love to use a ref on the container div and target down to any level with .children[i] or .querySelectorAll but this hasn't quiet panned out in my experiments. I appreciate the advice, please let me know if my demo needs adjusting or if I can clarify anything! Nye

@GreenSock That seems like a much easier approach to tweening the amplitude, I'll give that a go. Very much appreciate the insight on a getter and setter once the value is properly exposed, I'll work on separating the update() and draw() functionality into the pieces of each! Cheers!

Hello! Relatively new to GSAP but have loved the forums for awhile now, hugely helpful for almost anything I encounter! However, I've stumbled into a canvas animation I can't quiet figure out. I have a canvas wave animation whose height is controlled by an "amplitude" value on line 7. I am unsure of where the .to tween must be placed to have access to the draw function and the amplitude. Would love any pointers you may have to offer! Please let me know if there is any additional information I can provide. Thanks, Nye