Jump to content
Search Community

Stagger Animation with React Functional Components

ericnguyen23 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

Link to comment
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
Link to comment
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
Link to comment
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 4
Link to comment
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 4
Link to comment
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 2
Link to comment
Share on other sites

  • 8 months later...
  • 10 months later...
On 8/31/2019 at 12:08 AM, 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.

 

 

 

 

 

Good job, 

Link to comment
Share on other sites

Just a heads up - I'm unsure what's best practices, but GSAP can access elements in React without refs. 

 

gsap.utils.toArray('.card').forEach((card) => ...) actually works just fine in React. Loops through all elements with a className of "card" and applies your GSAP code to each. Pretty handy, feel free to assign gsap.utils.toArray('.card') to a variable and log it out - you'll see you're still getting references to all cards, wrapped up in an array to boot.

Link to comment
Share on other sites

1 hour ago, granularclouds said:

Just a heads up - I'm unsure what's best practices, but GSAP can access elements in React without refs. 

 

That's never been a problem,  is all html at the end of the day. However, I wouldn't recommend that approach as it searches the entire DOM, so it could mess stuff up if you use the same component more than once.

 

It's best to stick to refs in any component framework like React, Vue, Angular, etc.

Link to comment
Share on other sites

If the elements you want to stagger are all in the same group or container, using yourRef.childNodes works fine too.

<g ref={element => {container = element}} >

  <circle....

  <circle....

  <path....

</g>

Then

let container = useRef();

gsap.to(container.childNodes, {

  stagger: {
   ...
  }
})

 

  • Like 2
Link to comment
Share on other sites

  • 2 months later...
25 minutes ago, Dan_2021 said:

Very good article about how to use gsap in functional react components in the best way:

 

useMemo might be okay for some stuff, but I generally prefer using a ref as it is equivalent to this in a class component.

 

A new selector utility was adding in gsap v3.7.0, making staggering much easier.

 

See the Pen rNyZygQ by GreenSock (@GreenSock) on CodePen

 

 

  • Like 2
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...