Performance & GSAP

[00:00:00]
>> Sarah Drasner: Performance, not all things are created equal. You shouldn't be animating with margin, left, top, things like that because they cause repaints in the browser. Transforms are really what you should be using to animate and change positions for SVG, but not just SVG, everything, divs, everything. You should also try to hardware accelerate where possible.

[00:00:25]
So here is a way to hardware accelerate elements. You can do what we call the null transform hack, null z transform hack. So transform: translateZ 0; back-face visibility: hidden Perspective 1000px. That will hardware accelerate that element in the browser. If you wanna read more about those you can check out these two resources.

[00:00:46]
I wrote one of them and Paul Louis wrote the other. So if we move one thing with transforms and one thing without, if we look at this in the browser, first you can kind of see one of them jittering across and one of them not. And if we go over here and we go More Tools, and we go Rendering, we bring this up and we say Paint Flashing.

[00:01:14]
You can notice that one of them has a little green rectangle and the other one doesn't. This one is not hardware accelerated, and this one is. So anything that's not hardware accelerated, it, once you to turn on that paint flashing, will start alerting you. Chrome does not properly hardware accelerate a lot of SVG Dom nodes, so don't be too scared if you see that.

[00:01:38]
It is hardware accelerated in Firefox, though, so you shouldn't pull those things off, and again I'm trying get them to hardware accelerate that. So maybe some day, you'll write this pen, and all of a sudden it will be hardware accelerated. So keep doing those things. But also the nice thing about GreenSock is they already have that hardware acceleration for you under the hood.

[00:01:59]
They're gonna assume if you're using GreenSock, you probably want all that stuff. And you can unset that with a flag, but I've never really needed to unset that. If you wanna read more about all of these things, there's also a case study about Netflix, and the source is Wealthfront.

[00:02:17]
And these are kind of CSS properties, and the things that it causes, these are CSS triggers. You can see, opacity and transform does not cause layout and paint retriggers. If you're kind of bummed out, cuz that seems like not a lot of properties to animate, transforms are really powerful.

[00:02:36]
There's tons of stuff in transforms. You can move things, you can skew things, you can scale things. All of the pens that you see today, all of these crazy things that we're gonna do, are all done with transforms. So it doesn't really limit you that much. Okay, so work flow, why would I use GreenSock just for workflow?

[00:02:56]
Well, let's say you have a few different key frame animations and you have things at different percentages. And let's say there's a burst at 60% of one animation and then 60% of another animation, two different elements. Well, what if the timing of something that came way, way before it changes?

[00:03:16]
You could adjust the percentages and recalculate both of those, or you can try to keep them both in lockstep. But eventually what's gonna happen is, you're gonna have to rewrite all of the animation code that came before it. Because the only way to chain CSS animation is by making the greater and greater delay.

[00:03:37]
And it's not that legible. It's not that legible to make all of those key frames. They're applied in a different area than you're applying the animation. So sometimes in your code, you'll find if you do like a really crazy animation, they're kind of floating away from each other.

[00:03:53]
It's like where did that key frame go? Is it down here? So you're kind of like thinking about it and then applying it in two different places, so as it gets more complicated and your code gets longer, it gets a little bit more stringy.
>> Sarah Drasner: There’s also a stacking order for CSS transforms so lets say you want a bunch of things to happen at once.

[00:04:14]
You wanna scale something, you wanna rotate something. There’s basically one thing that will happen at a time. Unless, there's like two ways of solving this. One is to wrap subsequent divs or groups around the thing, and animate those all separately, which is a lot of mark up and gunk.

[00:04:34]
Or you can find the intermediary values of each piece in the middle of the other pieces to apply them. Yeah, that's the work the computer should be doing. That's not stuff that you wanna be doing. Whereas GreenSock, it doesn't matter. You can just apply them, GreenSock will figure out the matrix transform under the hood and just do it for you.

[00:04:58]
So that can be really nice. So there's really great features, simple syntax. I should mention I'm not paid by them or something. I don't work for them, I'm not like selling you their product. I just am an animator who found a tool that they really like. I should just say that out of the gate.

[00:05:14]
You can use whatever tool you want, I just really like this tool a lot and it has a lot of features. Simply syntax, Timelines, Nested Timelines, Draggable, DrawSVG, Stagger, MorphSVG. So I mentioned that you can do a lot with transforms. This whole pen is just a bunch of transforms over and over again applied to different elements.

[00:05:38]
And I'm using a timeline, so if I wanna change one thing, it doesn't affect everything else, it just gets ordered in time and that's totally fine. And I can reuse pieces of the animation as well, cool.
>> Sarah Drasner: It solves some cross browser inconsistencies. Some of you probably already found some of these.

[00:06:00]
You did, I think. [LAUGH] Some of the transform origin issues that you'll encounter get kind of squirrelly. Old IE does not support CSS transforms at all. Edge does, and later browsers, Microsoft browsers. Safari zoomed, this got solved and then like unsolved and I think it's solved again, sometimes it comes back.

[00:06:23]
None of these are an issue. You can get these kind of transforms and rotations working with GreenSock back to old IE9, so even old IE will work with GreenSock. And this is my favorite one. Actually Mark back in the day showed a pen that showed the problem with stacking different transforms.

[00:06:42]
So this is what GreenSock does. I should mention that CodePen's having this issue, where inside an embed, the transform is getting weird. So transform left top, the red is what the spec thinks it wants. So real spec behavior, the spec that they wrote, everybody was like, yes, this sounds good, is the red one.

[00:07:08]
What, like what? [LAUGH] That is not great. But the green one, the way that GreenSock compensates, and it's like, you know what? I assume what you mean is that you want this to happen. So stuff like this, if it's not working correctly, can really ruin your time. I was mentioning to someone if I'm not able to use GreenSock and I have to use CSS animations for a really long, complicated client project I will bill extra hours.

[00:07:40]
I'll say, it's gonna take me X amount longer because I have to compensate for all these strange idiosyncrasies.