Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
ericnguyen23

Stagger Animation with React Functional Components

Recommended Posts

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.

See the Pen zYOdZYE by ericnguyen23 (@ericnguyen23) on CodePen

Share this post


Link to post
Share on other sites

I think it might better to ask hooks related question on Stackoverflow instead of here. Like how to create an array of refs. There aren't too many people who are familiar with hooks over here.

 

That said, I got it to work, but I don't know if that's the best way to create an array of refs.

 

See the Pen 4880ac772b8c653ec77e2a7f66a3c27f by osublake (@osublake) on CodePen

 

 

  • Like 4

Share this post


Link to post
Share on other sites
7 hours ago, OSUblake said:

I think it might better to ask hooks related question on Stackoverflow instead of here. Like how to create an array of refs. There aren't too many people who are familiar with hooks over here.

 

That said, I got it to work, but I don't know if that's the best way to create an array of refs.

 

 

 

 

 

 

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! 

  • Like 3

Share this post


Link to post
Share on other sites
9 hours ago, ericnguyen23 said:

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. 

 

Can you share the link to the Stackoverflow question? I'm just curious what they said.

 

And we don't mind answering React related questions. It's just that none of the regular contributors over here have any real experience using the Hooks API, so we might not have an immediate answer. We are all learning as we go.

 

  • Like 3

Share this post


Link to post
Share on other sites
10 hours ago, ericnguyen23 said:

while other community took a tangent

 

Ha. Yes they did.

 

I found a couple other questions related to this.

https://stackoverflow.com/a/55996413/2760155

https://stackoverflow.com/a/57102037/2760155

https://stackoverflow.com/a/55105849/2760155

 

In those answers, they create an array of createRef(), which requires extracting the current values into a new array to get the actual elements. Not sure which approach is the best one to use.

 

See the Pen 380bc625dc8c3464518a988e799691f7 by osublake (@osublake) on CodePen

 

 

  • Like 3

Share this post


Link to post
Share on other sites
11 hours ago, OSUblake said:

 

Ha. Yes they did.

 

I found a couple other questions related to this.

https://stackoverflow.com/a/55996413/2760155

https://stackoverflow.com/a/57102037/2760155

https://stackoverflow.com/a/55105849/2760155

 

In those answers, they create an array of createRef(), which requires extracting the current values into a new array to get the actual elements. Not sure which approach is the best one to use.

 

 

 

 

 

 

Nice work digging up those threads!

 

Two reasons why your first approach is better:

  1. Less code
  2. Adding additional cards requires adding additional createRef( ) 

 

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×