TweenMax Syntax

[00:00:00]
>> Sarah Drasner: Okay, GSAP overview. Let's learn how to animate with Greensock.
>> Sarah Drasner: So here's the syntax. We have TweenMax, and if you hear people say like, TweenMax TweenLight and Timeline Max, Timeline Light. It's all the same thing, right? TweenLight is a lighter version of TweenMax. TweenMax gives you some extra features like some more CSS properties to animate.

[00:00:27]
It also allows you to loop things. And TweenLight does not. So if you're really weight conscious you could start with TweenLight, see how far you get and then maybe switch to Tweenmax when you need to. I usually start with Tweenmax these days cause I think it's only 27 kilobytes or something like that.

[00:00:44]
>> Speaker 2: Yeah, and I looked up if they are using ES modules now so you can use it with Webpack and get the tree shaking as well. So you know.
>> Sarah Drasner: Totally, totally. So you can, you basically bring it in by the too. So you'll bring in TweenMax or TweenLight, whichever one you need, and then you would also say sign, or bounce, or whatever.

[00:01:04]
And then yeah, you get tree shaking and that. So you would say npm igsap or yarn@gsap, exactly. So we'll start with TweenMax and if you here me say GreenSock or gsock, that's the company that makes it, and TweenMax is the library. So it's kinda like, Facebook makes React.

[00:01:27]
So GreenSock makes TweenMax, yeah. So TweenMax, and then you'd say to from or from to. So, basically you say it's like a sentence. If you take this element and you're saying go to that location. Or you take this element and you say come from this location. Or you say from to.

[00:01:49]
And from to is really good for entrances, it's good for like, if you're saying like, come from over here and then go to over there. Then we have the element, the duration, the property and the amount. So instead of applying it in two places, instead of saying got key frames and then applying the animation to something, this is actually kind of one line of code but I'm writing it in to three different lines so you can see it a little bit more clearly.

[00:02:19]
So TweenMax to I grab some div and this is the same as a query selection. Think of it like a j query thing. You can put ID's in there or elements. Duration and then I have a bunch of things here. You might notice that it says scaleY, scaleX, y.

[00:02:42]
It's transform, translate X, transform, translate, it's all of those things, but they shorthand it, because they assume, they're like, okay, we get it. Just Y, Y is fine. [LAUGH] You don't have to write transform, translate X all of those things. Scale Y, Scale X, opacity. You also don't have to put the unit unless it's a default unit.

[00:03:05]
So it's going to assume you mean 100 pixels. It's just like don't worry about writing the pixels. So then you can have. I mean this is one line of code. That's kinda crazy. Think about how many lines a code that would be in CSS. I've written bounces in CSS, its not one line of coded.

[00:03:27]
It's many, many lines of code. So this is pretty cool. And in the repo I did a little cheat sheet of all of those properties in case you need to look at them or check them out. So this is what it is in GreenSock land. And this is what it is in CSS land, the CSS counterpart of these things.

[00:03:47]
So if you wanted to check that out while you're making things then it makes a little easier.