MorphSVG

[00:00:00]
>> Sarah Drasner: MorphSVG, this is one of my favorite parts. Actually there was a question way earlier in the day, which was how to morphSVGs, so now we're actually gonna talk about it. I was like, just a minute! Okay, cool, so I used to live in San Francisco, and there's a lot of hipsters in San Francisco.

[00:00:18]
So I made this pen about my friends called Interchangeable Hipsters, just like changes the glasses and the beards randomly. That's all done with morphSVG, just a silly, goofy fun. So remember that, design everything first, slowly unveil things, we talked about way back in the beginning, in this CSS Tricks pen?

[00:00:39]
So before, you knew how we did this in terms of strategy and strategery, strategizing. Now, you can find out how we actually made this with code. So when we worked with that CSS Tricks, a bunch of things morphed from one thing to another. There's also other little bits, like this has some DRAW SVG.

[00:01:01]
When it went [SOUND]. That was some DRAW SVG little stuff, but the rest of this is morphSVG. So let's talk about morphSVG. It's really easy to use. You go morphSVG shape and actually I think it still supports this, but I think they've even changed it now so it just says, morphSVG end, if I remember correctly.

[00:01:23]
So you can use both, you can use either. And you're really pointing from one ID to the other. I believe it does have to be an ID, it can't be a class. You're pointing from one thing to the other, and the way that it works really under the hood, I'm explaining this part because otherwise, you'll run into, if I don't explain how it works you’ll run into problems.

[00:01:47]
Is that it’s going and grabbing the point data the path point data in the DOM and using that to change the existing path points. So that thing that element that you're starting out with does not become the other thing. It looks like it's becoming the other thing. It's not really, it's just using it's path points.

[00:02:10]
So if you need to target that first one again, that start again, after this, it's still that still same ID. It didn't turn into this ID, got it? The other part of that is that you don't want to show this shape, right? You want to hide that in the DOM, so that it's in the DOM for it to go grab but that it's not readily apparent for people to see.

[00:02:35]
Otherwise, it will look like it's still in the DOM. You don't have to leave the shape in the DOM if you don't want to. You could just grab the path points and dump them into this string if you want. It's just a little less messy. I don't know, it's up to you.

[00:02:49]
It's totally up to you. Sometimes it's such a small amount of path points you might as well. The big deal here is that you can change the amount of path points with SVG values. But if they're not the same amount of path points, it gets really ugly really quickly.

[00:03:04]
So you could just grab the attribute D and with JavaScript, change it to another attribute D path values. But the morphs don't look very good. GreenSock does a lot of calculation under the hood to make sure that that morph ends up being really beautiful and kind of cohesive.

[00:03:27]
It only works on paths. But they give you a method to convert circles, rects, ellipse, lines, all of these other shapes. Two paths in order to use it if you want to. So if you want to work with a rect and change it into some other shape, you’d have to go morphSVGPlugin.ConvertToPath change it to a path and than you could use it for morphSVG.

[00:03:51]
One thing about that though, if you do convert it to path, you can't access it then by calling circle. I can't then go, grab the circles out of the dump because they're no longer circles, they're now paths. You can also just grab it by the ID that it actually is.

[00:04:09]
I usually do it this way, because you don't want it to run all those calculations unless you really need it, right? So another thing we can do is use this thing called shapeIndex. And shapeIndex is a thing that they offer you so that you can finely tune your morphSVG animations.

[00:04:30]
It's a plugin that you'll load. You're gonna load it into the DOM and play with it and use it and find things out. But then you're gonna remove it, you're not gonna ship it to production. You're just gonna use it as kind of a utility. So let me show you what it looks like.

[00:04:44]
So if we go into CodePen, I'm gonna comment this out for a second. I have to run it.
>> Sarah Drasner: So that's what that looks like. I've got a hex and I've got a star, and I'm pointing from one to the other. Hex to star, and it's going to animate.

[00:05:05]
And actually, I can probably do, well, I won't spend that much time on it. I was gonna do repeat negative one yo-yo true, so it's continuously doing it, but I actually findshapeIndex does that too. So I load in findShapeIndex, right? MorphSVG loaded in, findShapeIndex loaded in. And then I say findShapeIndex hex and star Save, Run, and this GUI comes up, and the GUI will start with what it thinks.

[00:05:38]
It'll try to figure it out for you and it'll be like what auto thinks we want is this. So check out the way that it's morphing right now, that kind of motion. That looks pretty good, right? Well, what happens if we change this? Watch this, that is a totally different animation.

[00:05:59]
That's not even in the same ballpark of the same animation. And you can kinda play around with it like, that's not the same animation. So the way that you play around with this can totally change the way that you're thinking about those shapes, and the way that they're morphing.

[00:06:16]
And can be really important if you have something like a rhino and a hippo. Maybe one of them looks totally crazy, and the other one looks like they're actually changing shape together. So some of it is about believability. Some of it is about maybe taste or something. So again, this is why I'm so enthusiastic about GreenSock is because they don't just make your life easy by having these plugins.

[00:06:40]
They always have these extra little details that are really nice that make these things really easy to work with. I made this CodePen where I live coded the scene for Smashing Conference. And this water here was something that I live coded, so basically this is a bitmap that's inside of the SVG and I applied a filter that I'm animating in it.

[00:07:07]
This is DRAW SVG, that rainbow, right? That's DRAW SVG, and then that's view in those coordinates that we talked about earlier. And then this arm right here is not morphSVG. The arm right here is me playing with cues, it's just cues. How I said I love those curves, those cues.

[00:07:27]
So it's a queue from here to here, a queue from here to here, a queue from here to here and then I move a couple of different points. And the way that I do that and even the way that I do the filter is to work with attributes.

[00:07:44]
So I wrote the attribute for the arm by hand.
>> Sarah Drasner: So I wrote out the arm by hand here, and then I wrote out the arm by hand here and changed it from one to the other. So remember when I said GreenSock is beautifully dumb. It's kind of like, do you have numbers?

[00:08:02]
I can change numbers, give me numbers. So in this case, GreenSock can say, I am just changing one of these numbers from here to here. So you can grab attributes out of the DOM. You can go grab a D and change some numbers around. It can also change that ripple effect.

[00:08:20]
Where did I code that? I think it was up here, yeah, yes. This whole thing was something that I added in and coded and then I change the attribute over not in the view part, in here. So I change the base frequency of that turbulence and then it causes all of the filter and the filter affects that bitmap image beneath it.

[00:08:50]
Kinda makes this neat, watery, rippley thing that's kinda fun to play around with. So SVG filters can be super fun to play with. So if you wanna see that live coding session, it was like an hour long, so I'm not gonna do it as part of the workshop.

[00:09:05]
We'd be here a long time, but if you want to see a video of that, it was recorded. We are going to talk through this pen a little bit too. So this was done with morphSVG as well. I was trying to make a candle and we talked about elemental, how to work with elemental motion.

[00:09:24]
So this is done with a combination of morphSVG and changing the filter like we just saw. So how is this done? First, I just took some gradients. I just drew a candle with some gradients. That's a radial gradient. This is another kinda gradient and this is one more gradient.

[00:09:46]
So it's actually only three paths. And then I drew a bunch of candles. And these aren't actually blue and stuff. I just did that so that you can see the difference between all of the candles. Kind of shapes I drew. I have this one in the middle, it makes it a little bit more stable right in the middle of the pen.

[00:10:08]
And then I have these little bits that go up. If you watch the candle for a little while, there's these little, I don't know what they are, they are just little sparks that kind of fly up. And then there is this background oval lips that gets bigger and smaller.

[00:10:28]
So I created a filter and this filter is not something I thought of. This is something that I learned from a guy named Lucas Bever. He created this filter that's this GUI filter. Basically, he makes a contrast filter and a blur filter work against each other. And I guess they're natural enemies out in the wild or something.

[00:10:48]
And this pen that he made is like the most popular pen on co-video. It's not much, right? It's just our menu opening and closing, but everyone's mind was blown by using this technique of these two filters together. I think it's got like a million views or something like that.

[00:11:05]
So I learned that technique from him which is you can take two SVG shapes and make them kind of malleable and goo into each other which can be used for all sorts of stuff. Remember that smokey thing that we were talking about earlier, with the balls and stuff, I could totally use one of those filters to make that smoke effect.

[00:11:27]
>> Sarah Drasner: I also made a bunch of those paths that you saw with the kind of candle, and the first one is f-stable. I don't know, you can [LAUGH] call it whatever you want naming. F1, F2, and so on and so forth for a bunch of them. And that's kind of important because I just used a for loop to go through them and morphSVG from one shape to another with that for loop.

[00:11:52]
But the other thing that the for loop does is it plots it on the timeline by using an incrementer. So every time it finds one, it goes through. Opacity is mapped out random because nature's just a little bit random. It's just kind of if you don't try too hard to make it perfect, it won't actually look perfect cuz that's not how nature works.

[00:12:13]
But here's that attribute again, I went and found the standard deviation of the filter and I'm changing the amount of that goo effect. Because sometimes when you look a candle, sometimes they're more stable and they look more full thing, and then sometimes they look more gooey. They kinda go in between, looking like that depending on the air or environment around them.

[00:12:37]
This standard deviation is not an animatable property. It's not a property that you're allowed to animate, but you're using requestAnimationFrame and just changing numbers. You could do that with the Vanilla Java Script too. But GreenSock also is just like changing numbers, I can change numbers, totally.