Using TweenMax with React
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.
[00:01] 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})"
[00:18] 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.
[00:34] 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.
[00:56] 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.
[01:11] 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.
[01:32] 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.
[02:08] 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.
[02:52] 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.