Jump to content
Search Community

GSAP and react

thomas159 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,

 

I'm trying to integrate gsap with react and have managed to look at a few examples and get a simple tween working, however I'm struggling to work out how to animate all squares in my example and not just the last item.

 

I would the same affect to apply to all squares or someway to target each square.

 

I don't really understand what this does, so if someone could explain?

'ref={ a => {this.name = a }' 

 

 

I have created a codesandbox.io pen as this is alot easier to work with for react than codepen but don't seem to be able to embed it :( 

 

https://codesandbox.io/s/l2w1o9n1p9

 

See the Pen by s (@s) on CodePen

  • Like 1
Link to comment
Share on other sites

Hi,

 

Basically the ref attribute in React, points to the node element being created and then added to the DOM. When you use a function in the ref attribute, the parameter passed by react is the DOM node being created.

 

Now the problem with that code when used in a map array helper, is that is adding a reference to that specific node in the react component. So every time the map helper runs the reference to this.name is updated to that last element. Therefore when the array mapping is complete, the reference in the component is only the last element.

 

render(){
  return(
    '<div ref={ (node)=>{console.log(node)} }>
    </div>'
  );
}

//the console will return the <div></div> tag

 

This is perhaps one of the sore spots of animating mapped collections with react, how can we reference all the elements created in the map helper.

 

The main question here is, what type of animation you're trying to create?. If you want to do a one time stagger, then perhaps you could create  an array and use the map callback in order to push each node element and do the tagger. If you want to access each element independently, then you should give a unique name to each one in the ref in order to reach them when necessary.

 

Right now I'd suggest that you post back with the type of animation you need and we can take it from there.

 

Best,

Rodrigo.

  • Like 5
Link to comment
Share on other sites

HI Rodrigo,

 

I'm looking to do a onetime stagger on each element, having each square fly off every 1/10 second.

 

I tried to do it another way using the code below

const data = [
  {id:1, name: 'box1'},
  {id:2, name:'box2'}
  ]

data.map(item => className={styles.box} ref={con => {item.name = con; }}
         
         
 

 

however I then wasn't sure how to reference this into the timeline

 

tl.to(whatGoesHere??, 0.5, { css: { backgroundColor:"#F19939" } }, )

 

any suggestions welcomed

  • Like 1
Link to comment
Share on other sites

If you're using an array with the data you'll use as a reference, then there's no need to use an anonymous function in the ref attribute, just pass the property of the element being used in the map helper:

 

const data = [
  {id:1, name: 'box1'},
  {id:2, name:'box2'}
  ]

data.map(
  (item, index) => 
  	className={styles.box} key={`box${index}`} ref={item.name};
);

 

Then reference the element following the same pattern:

 

tl.to(this.refs.box1, 0.5, { backgroundColor:"#F19939" });

 

Keep in mind that the GSAP instance must be created inside the component's that has the node element.

 

Here's a simple example made in codepen. Is not a lot of code so it should be easy to follow:

 

See the Pen RVLBGJ?editors=0010 by rhernando (@rhernando) on CodePen

 

Happy tweening!!

  • Like 7
Link to comment
Share on other sites

@Carl, @PointC, you guys always know how to put a smile in my face. Is great to feel welcome everytime I pop in the forums.

 

@thomas159, since you want to do a one time stagger the best choice (that I can think of at least) would be to create a timeline in the `componentDidMount` method and add each instance looping through the same array used to add the elements in the DOM. The only caveat is that you need a reusable property in each element of the array for the reference, which in the case of your sample could be the name property of each element.

 

Here's a very simple example:

 

See the Pen xLzybx?editors=0010 by rhernando (@rhernando) on CodePen

 

Happy Tweening!!

  • Like 3
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...