Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 835 of the free egghead.io lessons, plus get React content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



Using TweenMax with React

3:15 React lesson by

React's use of the VirtualDOM can make it confusing on how to get actual elements to use in animation libraries like TweenMax. This video shows how to use this.getDOMNode() and this.refs and hook them in to TweenMax to satisfy all of your advanced animation needs.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

React's use of the VirtualDOM can make it confusing on how to get actual elements to use in libraries in TweenMax. This video shows how to use this.getDOMNode() and this.refs and hook them in to TweenMax to satisfy all of your advanced animation needs.

Avatar
Deryck

Good page load animation if done in CSS :)

Avatar
Jori

Question besides the content. How do you do that on 1:24 in webstorm.

To use TweenMax in React you have to use the componentDidMount function, so that you can get this.getDOMNode, which gives you access to the actual element so that with this guy here, this node, I can say, "TweenMax.to(note, 5, {x: 299})"

Once I hit save, you can see that I refresh, and it moves over to 299. Nothing else returns the actual element. You have to use componentDidMount, and say this.getDOMNode.

If you want to use TimeLineMax, we're going to have to create a container here, so come down here. I'll create my class. Call it "Container." It will just return a div with, let's say, four boxes inside of it. Then we'll replace this box with Container.

I'm also going to add a class name here of container, which is basically going to give it some padding here, because I'm going to move one box up, one right, and one down, and one to the left. These are all stacked on top of each other with absolute positioning.

To get access to each of these individual boxes what we're going to do is give them something called refs, where I say, ref equals and then just give it a name. This one can be top. This one can be right. This one can be bottom. This guy can be left.

Now that we have these, we can set up our componentDidMount, and access each of them through this.refs. We'll go ahead and create a few lines here, and say, "this.refs.top.getDomNode," say, "var top," and then we'll just rename each of these right, bottom, and left. This guy is him, he's him, and so on and so forth.

Once we have each of those elements I'll create a new TimeLineMax. From my timeline, I can start saying, "t.to." We'll just move top for .5 seconds, and we're going to move it Y value." We'll make this -100 relative. Inside of a string makes it relative to its current position. We can chain these together. This top is right. We'll move him X 100 relative. This top is going to be bottom. We'll move him positive Y. This top is now left. We'll move him -100 X.

Once we see this in action, I'll hit refresh. You can see up, right, down, left. Then, just for fun, we can say repeat forever, so -1. And "yoyo: true" so that it goes back and forth in its timeline. Up, right, down left. Left, down, right, up. It will keep on looping through that transition.



HEY, QUICK QUESTION!
Joel's Head
Why are we asking?