Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Using TweenMax with React

    John LindquistJohn Lindquist

    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.

    reactReact
    tweenmaxTweenMax
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss