Motion Along a Path

[00:00:00]
>> Sarah Drasner: Motion along a path. Motion along a path is really important for realistic motion. If you're gonna try to animate something that looks realistic in real life, there are very few things that just go straight through things and time. Even if you're making a truck go down a street, you might want to bounce it along or have something happen to it.

[00:00:19]
So this is one of the coolest things about SMIL. If you know what SMIL is, it was the native way to animate an SVG. But SMIL is never gonna be supported. Basically, Microsoft browser said that they were never gonna support it and Chrome has put it into, well, first they put it into deprecation, then they took it out of deprecation and just said, we're never gonna work on it again, so it's just not, nothing's going on with it.

[00:00:45]
Like, it's just not something you should bet on using. But it had motion along a path, and there is a motion path module, but it's not really well supported either. So, the nice thing about using GreenSock's motion along a path is, first of all, it's in GreenSock, the open source version.

[00:01:06]
So you don't have to load a plugin. If you do MPMIG sap or load up GreenSock, this is in there, you don't have to add something else. So we have backwards compatibility and it's cross browser, even old IE, this I just said, but it's also written in the [LAUGH] slides.

[00:01:27]
If you wanna vote for CSS support in motion along a path in Edge, you can vote on that here. I think it has a lot of votes now. But basically, this is how you use it. I'm gonna grab some fireflies and I say bezier, and I'll say type is soft, and I pass in an array of values.

[00:01:45]
We are getting pretty used to this xy xy nonsense, right [LAUGH]? Like, xy, xy, xy, xy, and then autoRotate:true, I will show you what that is in a second. It's pretty self explanatory, it rotates with whatever curve it's on. So if I have these fireflies, actually let me come out of here, okay.

[00:02:10]
So I have this like lighting, does some things, then I've got some fireflies, and they're kind of moving around. Fireflies, if you watch them do this weird thing, where they kind of like, pop into different places and move and kind of, I watched a bunch of YouTube videos [LAUGH] of just fireflies moving around to get the motion, which you should do, if you're trying to emulate something in real life.

[00:02:33]
But the people around you will be like, what are you doing? And your search history will get super weird. Like, your recommendations [LAUGH]. My recommendations for YouTube are like, either code or shattering glass, I don't like, [LAUGH], it doesn't understand. So when I'm talking about that auto-rotate, you can kind of see how the fireflies move around with the curve that they're on, before they kind of, and they're kind of flickering a little bit, too.