ericnguyen23

Nice work digging up those threads! Two reasons why your first approach is better: Less code Adding additional cards requires adding additional createRef( )

@OSUblake here's the thread.

I did eventually post on Stackoverflow, but you actually came up with the solution, while other community took a tangent. Matter of fact, you guys have answered a bunch of my React related questions. THIS was the part I was missing. Didn't realize I could reference an array this way. let cardRef = useRef([]); Again, hats off to this community. I know this question is leans more heavily towards React but will come in handy to others as React is pretty popular. React + GSAP is a pretty amazing combo!

Hey Guys, I'm trying to figure out how to apply StaggerFrom animation with my React functional component. You guys were able to help with Class component version as seen here. I'm thinking I need to set an empty array as a variable, then reference each array element within ref attribute, but can't quit figure out the syntax as let cardRef[] = useRef(); doesn't seem to work.

You may not know React, but you are pretty solid with JS! ? Everything makes total sense now!

Thanks, that does render the content but animation doesn't run. I'll play around with it some more.

Hi Guys, I'm trying to do a simple animation with a React project using functional component. I'm getting this error: My timeline and DOM elements are defined and running my timeline within useEffect( ) so not sure why I'm getting that error. Any help is appreciated.

Thanks @Rodrigo This helps. I'll set my timeline up like this now: const [tl] = useState(new TimelineMax());

Question (for those familiar w/ React and GSAP) regarding setting Timeline with functional components. I'm aware that to access DOM, I would have to reference and set animation like so, which works just fine: // creating state objects const [animation, setAnimation] = useState(); // Set variable using useRef for functional component let headingRef = useRef(null); // add reference to the DOM element <h1 ref={element => {headingRef = element;}}>Hello</h1> / // animate using useEffect hook and setAnimation useEffect(() => { setAnimation( TweenMax.to(headingRef, 1, { css: { height: 120, }, }) ); }, []); Now, what if I wanted to create a timeline. Do I just set it like so: let tl = new TimelineMax(); Or do I need to store it in a state object?

Thanks @PointC and @ZachSaucier - You've armed me with a couple of good options!

Thanks, I've added this and the jumpy/jittery behavior is still there. Let me explain what I'm experiencing: When I click on the name input box, browser jumps to bottom section. As I continue to scroll up and down, I also experience jittery animations. This again, likely due to Scrollmagic, so I'll take a look at css solution @ZachSaucier mentioned above.

I'm on s8 Plus, Chrome browser. Yes, same issues in debug view. Here's the debug link: https://s.codepen.io/ericnguyen23/debug/pozgdWz/jVApobzEWqZr

There's a strange behavior with GSAP/Scrollmagic with input fields on Mobile Phones (I'm testing on Android): When I scroll down to the form, click on the first input box, the browser jumps down to the bottom of next section. Works fine on desktop.

I'm trying to create a sticky scroll where paragraph appears as user scrolls down. The timeline and scrollmagic both work, but once I try to pass GSAP timeline into Scrollmagic's setTween, it breaks. You can see I commented the line of code out // .setTween(this.tl) **This is a React Project**

I ended up taking all z-indexes out of play, even on subnav ( since a negative z-index limited me to a lot of functionality on that element) and positioned it absolute and animating visibility and height which achieved the effect I was looking for. GSAP is amazing! https://codepen.io/ericnguyen23/pen/rXBgNR?editors=0110