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

Thanks Zach - although that works, it takes away the hovering functionality with subnav (because of the element below it). I'll look into more, hopefully I don't have to tear up my code too much!

I'm a noob in React myself, actually a relative noob in modern web dev, but seems like I have to use `useEffect` for animations to work with a functional component. This is what I was looking for, thanks! This is totally a side topic and not related to GSAP, but I'll throw it out there: How can I get my subnav to be positioned behind my main nav? https://codepen.io/ericnguyen23/pen/rXBgNR

I'm back! I've edited/updated my codepen since I'm developing a React menu: https://codepen.io/ericnguyen23/pen/rXBgNR So far, I've got the timeline to run (onLoad). Now how do I call it on mouseover and mouseleave? I've setup the mouseenter and mouseleave event handlers, but not sure how I'd go about calling the timeline.

Not yet, for now at least. I just wanted to verify this is possible. I'll go play with it now and if I have questions I'll come back.

I'm working on a "mega menu" type dropdown menu and currently just using CSS transition, triggered by JS mouseenter event. I eventually want to make it drop down. Is it possible to create the drop-down animation via Greensock as a timeline, then calling that timeline on mouseenter?

Oh sweet, thanks. I had the overflow-x but within the containing div and not body.

hmm, I'm interacting w/ yours and still can scroll right.

Thanks but that didn't work.

I'm attempting to animate images from outside viewport/browser in (sort of like an image carousel), but it creates extra space to the right. Anyone know how to animate similarly w/o that space? I tried overflow-x: hidden but that didn't do anything. thanks!

@OSUblake man thanks! I noticed you had to add GSAP's progress and clear methods as well.