Interactive SVG Animations Using Greensock

Captions provided by White Coat Captioning (https://whitecoatcaptioning.com/). Communication Access Realtime Translation (CART) is provided in order to facilitate communication accessibility and may not be a totally verbatim record of the proceedings.

Jason: Hello, everyone, and welcome to another episode of Learn with Jason. Today on the show we have the one and only Cassie Evans, also known as Cassie Codes. Cassie, thank you so much for join us today.

Cassie: So worries. It's lovely to be here.

Jason: It's such an honor to have you on the show. I have seen so much of your work and I am a huge fan. You have done some really incredible things. So, yeah, I just -- I kind of can't wait. For folks who aren't familiar with your work, do you want to share a little bit of background?

Cassie: Yeah. So, I basically just really like playing around with SVG. I'm a front end developer. But I have a background in design and motion graphics. So, when I started making stuff on the web, I think I found SVG really exciting. Because it's like an image format and code. So, it was a thing I was already interested in and I learned how to make vector graphics programs. When I started to code, wait, I can get these things and do stuff to them when the code that I'm learning? And that was just, yeah, really exciting.

Jason: Yeah.

Cassie: That's pretty much it. I could go on for SVG for ages. This whole stream is going to be you trying to stop me from rambling.

Jason: That's what we're here for, stories and a good time. I'm actually really excited because one of the things we're going to do is play with Greensock. We have done a little bit of work with Greensock. Sarah Drasner did some stuff earlier on Learn with Jason. Maybe, Mickey or Tony, you could find a link and drop that. But, yeah. So, I think, like, what I like about Greensock is that it seems to be able to do everything. I see so much incredible work coming out. What I don't like about Greensock is I'm instantly overwhelmed when I look at it. I'm excited that we're going to play today with some Greensock stuff. What do you have in mind in terms of what you want to do today? I know you crowd sourced this, right?

Cassie: Yeah, I crowd sourced inspiration because I couldn't decide what I wanted to do. So, everyone has decided that we're going to be making UI animations and scrolly UI animations.

Jason: Cool, cool.

Cassie: That's the coolest thing about SVG is, you know, a lot of people think when they think SVG, thing graphical like illustrative animations. But you can use SVG for so many difference things. You can use SVG for logo withs and you can use it for text. You can make text accessible to screenreaders. And because it's an XML-based markup language, you can have it intertwined with your HTML DOM. So, you can have it mixed up with semantic DOM elements and mix images and do cool things with it. We're going to play with some image masking.

Jason: I'm super-excited. I see that Tony and Mickey are ready to troll. Always ready for that. Let's switch over to pairing mode and we can take a look at some stuff. So, first and foremost, everyone go follow Cassie on Twitter. She is a delightful stream of SVG animations and recently piglets which I'm very much -- very much a fan of. And then also on CodePen, just a whole bunch of really inspiring and cool stuff. This one follows your mouse, doesn't it?

Cassie: Yeah, it does. It's my little avatar. I need to put my glasses on.

Jason: Wait, I turned on prefers reduced motion so it doesn't work for me. I did that because instead of doing the full thing, it does this like fade between desktops.

Cassie: Oh, yeah.

Jason: So, anyways, it's sabotage myself.

Cassie: I break myself out with the motion. I'll turn it on occasionally to test stuff and forget that I have it on. And I'm like, oh, my animations are broken

Jason: I thought I had broken my computer because when you shared this site, I saw everyone doing it and like sharing videos and I was like, why Doesn't it work for me? What did I do wrong? Then I found out it was preferred --

Cassie: That's my favorite thing is when dudes get hold of me, a lot of them got hold of me after my site went live. Actually, it's not working. Prefers reduced motion. It's doing exactly what I intended.

Jason: Yeah. Well, I'm very glad that I wasn't one of those dudes that sent you that message. Because I definitely thought about it. Yeah. So, this is -- and before I forget. Let's do a quick shoutout to our sponsors. We have live captioning going today. Uh-oh, pick it up. Oh, no! Did you rebel on me today? No! Twitch didn't notify -- oh, my god. Am I streaming to YouTube right now? Oh, no, I'm streaming to the wrong place! Holy shit! Oh, no, that is so not cool. No! Okay. Hold on one second. Let me fix this. Let me fix this. Oh, I can't believe I did that.

Cassie: We'll just do intros again.

Jason: Yeah, we're going to have to do the em whole thing --

Cassie: It's because I was so prepared. And then CodePen broke. And then this has happened...

Jason: Oh, Jesus, okay.

Cassie: If I look away, is it less pressure?

Jason: No, I've got to get my settings here. Oh, I can't believe I did that. Okay. All right. So, I've got to get this over to myself somehow. Oh, I hope I didn't just break the -- I was streaming to free code camps YouTube. I really he I didn't just break one of their old videos...

Cassie: It'll be okay! I'll just make encouraging noises.

Jason: Very much appreciated, very much appreciated. Okay. So, we're gonna copy this, I'm gonna put it into my... going live. Oh, my goodness!

Jason: Hello, everyone.

Cassie: Hi, everyone!

Jason: Well, I feel foolish. So, I started the stream, but I was streaming to the wrong place. So, Cassie and I have been talking to no one for -- for, you know, 10 minutes now. So... feeling a little silly right now. I apologize for that. Sorry we're late. I definitely thought we were live.

Cassie: A practice run!

Jason: Yeah, so, we got a great practice. This is going to be the most flawless opening you have seen. Hello, everyone, and welcome to another episode of Learn with Jason. Today on the show we have the absolutely charming Cassie Evans. Cassie thank you so much for joining us today.

Cassie: I'm so glad to be here for the second time!

Jason: Yeah. And so, you know, I have been a fan of your work for a really long time. I think you do such incredible stuff with SVGs and animations. And I see the chat is excited as well as they are burying you in boops.

Cassie: Boop!

Jason: So, for those of you who are not familiar with your work before you perish from drowning in boops, do you want to give us a little bit of background? We both the have to tip toe.

Cassie: Hi, everyone. I am a frontend developer. I used to be a graphic designer and I used to do a little bit of motion graphics before I learned how to code. So, when I started learning how to code and I discovered SVG, I just found it really exciting because it's this kind of cool middle ground in between design and development. So, yeah. It's -- it's just a really exciting kind of thing. If you're more visually minded.

Jason: Yeah. Yeah. And it's -- it's such cool thing too because it's like -- I feel like it's one of those things that it looks like magic, right if had like when you -- when you put out the stuff like you've released like your website has this SVG animation where the eyes follow your mouse around and those sorts of things. And it just feels so absolutely magical. But when you're doing this, it's -- like it's really -- it's -- it kind of is -- it's just math, right? It's a little bit of code, a little bit of math. And then you're able to make this magic. And so, I'm really, really excited to learn that from you today.

Cassie: It's also a lot less math than you think it is. Because if you use Greensock, Greensock does the math for you.

Jason: That is excellent news, because as the chat knows, I am not great at math. ( Laughter )

Cassie: Yeah, it's -- I kind of -- I feel like SVG itself has -- it has a few core things that you can use to create quite cool effects and then you can use Greensock to manipulate those properties. So, it's kind of like a little interplay between animation and what SVG is actually capable of. And it's -- you'll actually get further with SVG understanding what SVG itself is capable of than you will just kind of starting to try and animate it.

Jason: Yeah. Well, and what I think is really interesting about like -- so, Greensock, we talked a little bit about this before I realized that we were talking to no one. One of the things that I've always been really fond of with Greensock is that it does so much. You know, we've got episodes. We had -- Sarah Drasner was on and taught us some Greensock stuff. It was really, really cool. Maybe one of the mods can find the link to that and drop it in the chat. But, you know, the thing that always freaks me out about Greensock, I'm immediately overwhelmed any time I try to work with it. I'm really excited that you're going to help us break down a concept. And you're going to use something today that is really popular. A few folks in the corgi Discord were having a blast with it, the scroll tree.

Cassie: It's quite new, I'm not an expert. It's just popped out. We can do a bit of learning today.

Jason: I'm so excited about that. Thank you, Nate, for the sub. I really appreciate it. So, I think on that note, maybe it's a good idea, we can switch over into pairing mode. Everyone, make sure you two and follow Cassie on the Tweeters. And also, today, let's go back here. And look at Cassie's CodePen. Because it is just full of delightful things. I have prefers reduced motion turned on which means that some of these are not working. But if you don't have prefers reduced motion, especially like go check out this one. This is the one where the eyes will follow your mouse around and it's a whole lot of fun. Like I said, I turn off prefers reduced motion. And that means that a lot of these are beautiful to look at, but don't do the things that they would do had I not restricted my settings. And so, today -- oh, also, before I forget. Let's do a quick shoutout to the sponsors. We have got live captioning going today as we do every episode. Provided by White Coat Captioning. Thank you so much, Amanda, for being with us today. And that is made possible to us by Netlify, Fauna, Sanity and Auth0 workload had all generously sponsored the show to make this more accessible to more people which I very much appreciate. Check them out. And if you have live events coming up, make sure you check out White Coat Captioning. So, on that note, I have a pen that I forked from you. So, this is -- this is a thing that you made that is kind of a starting point. So, would you mind maybe giving us a quick walk down -- or walk through -- let's go into Professor Mode, right? Then I can share that with people, I think. I don't know.

Cassie: Yeah.

Jason: Let's find out. What happens if you click this? If you are -- if you are able to change things, please don't. But in the meantime, yeah, it should allow you to follow along live as we're working in here. And hopefully that will be a lot of fun. I can see some folks jumping in here. And I don't know if anyone can change, but we'll see. But, yeah. While we're looking at this, you can -- You hackers! You dirty hackers! That's you. Okay. People can't change. Okay. Excellent, excellent. So, this is working as intended. So, let me walk through what I understand. We have a heading. And that's what's giving us this. And then looks like we're using the Kanit font. Making the body like 5 -- 5 scroll lengths high. You've got this -- this really nice-looking background. Some styling stuff. And then putting the heading in the middle. Okay. And that's it, right? That's all we've got so far.

Cassie: Yes.

Jason: So, what else are we up to?

Cassie: So, I reckon to start off with, let's just make an SVG. So, we can actually make the body 100% of the viewport height because we're not going to do scrolling stuff yet.

Jason: Okay. I'll go 100% and remove the extra characters. So, now if I try to scroll, I can't.

Cassie: That's the one.

Jason: Okay.

Cassie: And then we can just get rid of -- well, comment out the SVG masking bit for now. Just leave that -- the --

Jason: Am I... SVG masking.

Cassie: HTML.

Jason: Oh, oh, just leave this part out. Gotcha.

Cassie: Yeah, yeah, that's the one.

Jason: Sorry, I was looking for an actual setting somewhere.

Cassie: Yeah. Rather than the text. Yeah, cool. I think the thing that I'm the most excited about with like today making a scrolly kind of UI mask is that graphic like illustrative SVG, you kind of have to put it together in a graphics editor. You don't have to. You can be really badass and just hand-code it. But you have to know quite a lot to hand-code a lot of illustrative SVG.

Jason: Right.

Cassie: What we're doing today is going to be simple in terms of markup, so we can actually hand-code it.

Jason: Okay.

Cassie: Demystify things a little bit. Start by writing an SVG tag.

Jason: Okay. That's as much as I know. We've now exceeded my knowledge.

Cassie: Cool. We're going to start by writing a viewBox attribute. So, the viewBox is basically like your window into SVG space.

Jason: Okay.

Cassie: It's like the little window that you look through to see what's going on in your SVG.

Jason: I gotcha.

Cassie: And you can think of SVG space as infinite graph paper that stretches out on all sides.

Jason: Okay. I gotcha.

Cassie: So, we're going to start off at zero-zero. Yeah. That's the one. And then we're going to say maybe a thousand. And another thousand. And that is the first number is the X coordinate. Second one is the Y coordinate.

Jason: And so, what we --

Cassie: Capital B in the box.

Jason: Capital B. Like that?

Cassie: Yep.

Jason: Okay. What we've just done, if I'm understanding this correctly, is we've basically said, I want -- I want to see our SVG from zero-zero on the grid to a thousand pixels and a thousand pixels. So, we just drew a square. A thousand pixel square.

Cassie: Yep.

Jason: Okay.

Cassie: The thing that people sometimes get wrong is thing that the second -- the second set of values, so, the last -- the third and the fourth value -- are also coordinates. And they're not coordinates. They are the amount of the SVG that you want to see. So, it's starting off at zero-zero and it's showing us a thousand SVG units. So, if we were to move --

Jason: Gotcha.

Cassie: The first two coordinates somewhere else, it would still just show a thousand SVG units from that point.

Jason: Right. So, saying that like if we were to -- because right now what we're doing is everything's gonna be relative to like the top left of the SVG. But if we wanted to center it...

Cassie: There's no top left. It's infinite in all directions.

Jason: But in terms of the viewBox. Zero, zero, if we position something in there being a hundred-a hundred, it's going to be a hundred from the top and a hundred from the left.

Cassie: Yep.

Jason: But if we set the zero to be like 500 or something, and then our top was a hundred, a hundred, it would actually be like 400 left and --

Cassie: Right. You wouldn't be able to see it.

Jason: I get it. That infinite graph paper is a really helpful way to think of it. Then you can picture that access. And let me point at the camera so this is a little more clear. With that axis, we have our Y axis and our X axis, yes, that's how it works. And we're saying start here right at the cross. And we could set that anywhere we want, right? There's no rules?

Cassie: Yep. You can set it wherever you want.

Jason: Got it. Okay. That was a really helpful visual metaphor. That alone was worth the price of admission. It just demystified something for me.

Cassie: Yeah. We can't see anything right now.

Jason: Right.

Cassie: We've got an SVG, but there's nothing in it. It might help to put a border on it in SVG -- in SVG? In CSS. We can put a border on the CSS element itself.

Jason: Okay. And we'll use my favorite CSS debugging tip.

Cassie: Yeah.

Jason: And so, here we go. There's our SVG -- let me make that a bigger border so we can actually see it.

Cassie: Make it plum.

Jason: Ooo, plum.

Cassie: Plum is the best color. That's my favorite CSS color.

Jason: Plum, got it. Okay. Now we've got an SVG. We can kind of see it here. This -- this border is the -- that's the limits of our SVG. And now we can put stuff in it, right?

Cassie: Awesome. So, let's give it a width first. So, at the moment it's kind of 100% of the width of the screen. So, maybe let's make it -- so that we can actually see what's going on inside it.

Jason: Okay. And you just brought up something that I think is really interesting. So, these are only relative to the SVG itself, not to its actual size in the DOM.

Cassie: Yeah. So, they're units. That's the aspect ratio.

Jason: Got it.

Cassie: So, it will be a square. But you control the size of it with CSS. Or like the width attribute on the SVG, I usually control it with CSS, though.

Jason: Okay. Cool. Cool, cool. And so -- it looks like it keeps its aspect ratio, which I like. We set the width to 50%.

Cassie: If you were to stet a height on it, then it would go squiffy.

Jason: Squiffy is a good word. I like that.

Cassie: Good. We can kind of see -- if we make -- let's make a rectangle inside our SVG.

Jason: And that's how you do it, right?

Cassie: Correct.

Jason: Okay.

Cassie: Erect -- a lot of things in SVG have an X and Y value and then a width and height. That's quite common.

Jason: Okay.

Cassie: Give it X, set it at zero at the top of the SVG.

Jason: Is it quoted or unquoted?

Cassie: Quoted.

Jason: And we'll do the same thing for the Y, I assume?

Cassie: Yeah. Y equals zero --

Jason: Or just --

Cassie: You can set width and height in percents. Set width, 100% and height 100%.

Jason: Short hand W or full width?

Cassie: Width.

Jason: Okay. Width, 100%. Height, 100%. There you go. Is this a self-closing?

Cassie: Yeah. You have one little closing. Awesome. And then to change the color on that, we use fill. Fill is kind of like background color in SVG land. I kind of think of SVG as it's like HTML, but for graphics instead of documents. So, it's very similar to HTML, but you have some things that are a little bit different.

Jason: Yeah. So, we've got two questions. So, Nicky asks, did the X and Y values have to be within the values you set for the viewBox?

Cassie: Not sure I understand that.

Jason: Like if I set this to negative 50 --

Cassie: Oh, yeah. If you set that to negative 50.

Jason: Cool, it just pulls it off.

Cassie: It will move it over by 50.

Jason: And Nate asks if the percent is relative to the viewBox?

Cassie: Yes, the percent is relative to the viewBox.

Jason: Excellent.

Cassie: If you're trying to understand positioning in SVG, writing yourself out a really simple SVG just like this and kind of moving rectangles around, changing the properties of the viewBox, it's really helpful to kind of understand things.

Jason: Like, here, yeah, if we start messing with this, we go 50% by doing half of the viewport. But then if we wanted it to be like height 50%, we could also do it that way.

Cassie: Yeah. Someone said it doesn't have to be within the viewBox, but you won't see it. That's what I meant by it's a window into the SVG infinite graph paper. Imagine SVG graph paper stretches forever and you can plot graphical elements on it wherever you want. Literally whatever you want. You could do minus 3 million that way or plus 27 million that way, billion, trillion, it just goes on forever. But the viewBox is the bit that you can see. So, you kind of want to plot things in the bit that you can see.

Jason: And then the question, there's another question about why we used a thousand. Is that just -- it's just a nice round number? Or is there a benefit to using a higher versus a lower number?

Cassie: Nice round number. We could set that to a hundred. Set it to a hundred, it's an even smaller, nicer, rounder number.

Jason: There we go. And because we've set the width over here, there's no material change because we --

Cassie: No material change because we haven't changed the ratio of it.

Jason: Yeah. Cool.

Cassie: Yeah. Awesome. So, we're going to be playing around a little bit with Greensock today to animate SVG elements.

Jason: Okay.

Cassie: You can start off by getting Greensock included in our project.

Jason: Okay.

Cassie: The actual library.

Jason: And it looks like because I forked this from you, it was already set up. But what we did here is we just -- I'll step through this again. By the gearbox in CodePen, the gearbox, click here, and look for GSAP, we selected that and scroll trigger is here. And once we select those, now we can use them and they're just in the scope of our JavaScript.

Cassie: Yeah. And I think that's the cool thing about using CodePen. Because they're like the core Greensock library is free to use for the majority of use cases. I think. If you're super-big business Corp. and you're charging users for your end product, then there's a small fee. But for the majority of people, it's like free. But they've got some bonus plugins that are behind a membership fee.

Jason: Okay.

Cassie: They're just kind of fun ones like physics-based ones and some kind of motion path. The motion path one's free? I'm not sure which ones are paid. You can play with all of them on CodePen for free. That's what I'm covering.

Jason: Okay. Cool. Now we have GSAP available and we have an SVG and we can see it.

Cassie: Let's move the rectangle!

Jason: Yes, I'm ready.

Cassie: Okay. In order to move a rectangle, we have to do a tween. So, Greensock tween is gsap. That's the Greensock object and everything you can do within Greensock is within that. So, we're going to use a meth called to. So, .to. And then we're going to do open curly brackets, round brackets.

Jason: Round brackets, okay.

Cassie: Those are the ones. And then we're gonna choose a target. Oh, we haven't given a class to our rectangle. So, we should go add a class to our rectangle so we can target it. You could also target it with just rect if you wanted. But then that's probably not the best plan.

Jason: Right.

Cassie: There we go.

Jason: Is this right?

Cassie: Yep. That's great.

Jason: Okay.

Cassie: So, Greensock uses document.querySelector under the hood. You can type in whatever you want in there. I've used some crazy selectors to choose things before. Then we're going to do a comma and then pass in an object of settings.

Jason: Okay.

Cassie: Awesome. So, the very simplest thing that we can do is maybe let's just move it from the -- well, to the right-hand side. So, let's say X%.

Jason: xPercent like this?

Cassie: Yes, with a capital P. And then we're going to do dotty semicolons. I don't know all the names for all the things.

Jason: This is great. This is one of my favorite.

Cassie: Pairing, I'm just like, curly brackets, dotty.

Jason: This is literally one of my favorite things about Learn with Jason is you get to hear how someone verbally describes code. No one does it the same. It's such a fun adventure every single time because we all have the secret words in our brains that we use when we're describing things. And I love that you just called it a dotty semicolon.

Cassie: At work, we call braces curly boys and round boys and square.

Jason: I love that! Okay.

Cassie: Yeah, xPercent. So, we're gonna -- yeah. Hundred. That's what we were doing. Sorry, I got distracted.

Jason: No, we're all good. Oh, and look at it go.

Cassie: Yeah. It moves! And it actually moves quite nicely, you might have noticed because Greensock comes with defaults. So, the defaults are 0.5 seconds. And standard ease. So, that's kind of what's happening with that little rectangle.

Jason: I'm just refreshing the page to see this. Cool. Yeah. So, how -- like what if we wanted to -- I'll just ask you. What do you want to do next here?

Cassie: What we can use GSAP.from as well. That's another method that we have.

Jason: Okay. gsap.to moves things from the existing values to the new values. And gsap.from move it is from the values to the existing values. If we change the .to, to a .from, we will see that it comes in from the right-hand side.

Jason: And so, practically speaking, from makes a lot of sense if this is when the page loads you want to move things into position. Then that would be great because you put everything where you want it. And then do a .from to have it, you know, fly in from wherever or fade in or grow or something like that.

Cassie: Yeah. It's a thing that I use a lot with SVG animation because you often want to strut to your SVG so that it's like everything's where you want it. And then use from to do the animations.

Jason: Okay.

Cassie: So, everything ends up in the right place.

Jason: Whoops. I got to go into streamer mode over here. Getting notifications. Hush, you. Okay. So --

Cassie: Someone said that they would be interested to see how you use easing in Greensock.

Jason: Yes.

Cassie: So, the best way to do that is to look at the easing thing. The easing dooda on the Greensock site. So, if you go to Google and search Greensock easing.

Jason: Easing dooda.

Cassie: Easing dooda.

Jason: It still comes up.

Cassie: Yeah. So, this is the Greensock easing did dooda. And, yeah. You can -- you can click on all these different kinds of eases and then you can use them in your project. That one's actually a really cool one. It kind of shows you the roughies. It shows you the power of easing, basically.

Jason: Yeah.

Cassie: Like, if you wanted something to jerk around, like wobble around and you were trying to do that with CSS. Because you've only got cubic-bezier to work with. You would have to write all that out with keyframes. Whereas with Greensock, it uses SVG path data as -- as the easing curve. So, we don't just have two handles like we do with cubic bezier. We have a whole bunch of different handles so you can create all of these crazy eases.

Jason: These are fun.

Cassie: Yeah.

Jason: And it's cool too to see like -- so, we've got the ability to control like the ease in and outside. Or, you know, it starts flat and then we control that. Or each of those pieces. That is really nice.

Cassie: Do me a favor and click on the custom.

Jason: Okay. Oooo...

Cassie: Oh, wait, go to -- yeah. Okay. You can click and drag these things around. But here's a really cool thing. If you go maybe to Power1, so, you get the right number of points. And then you go pack to custom. Ah, didn't work. Anyway. Go to the last little point. So, the top one, top point. And drag that down to the bottom -- bottom right corner. So, that's -- that is the location, right? That's where -- where you are in a time frame. So, you can create an ease that basically plays all the way through your animation and then goes back to the beginning again. Which blows my mind. So, it's actually --

Jason: Ah, that's really fun.

Cassie: At the end of the timeline the progress is back to zero.

Jason: Yeah. Now, this is really cool.

Cassie: Really, really cool. And that means that you could just do that with one tween in Greensock. You don't actually have to keyframe everything.

Jason: Yeah. No, that's wonderful. Because that's something that I could see being really tedious is like, oh, okay. Well, now I've got to add another keyframe to make it do this little jutter or something like that. If you're trying to get like life into. But it's also nice to see, like, that already feels pretty good. So, you could come in here and start with that and then mess with it a little bit. That's really powerful stuff.

Cassie: Yeah. It's seriously powerful. So, yeah. I really love kind of recommending to people that they play around with eases. Like, it's the most important thing in animation. If you can offload a bunch of your animation code just on to some eases, then you can cut down the size of your animation code hugely as well. And that's like the maths that we were talking about, right? That's what Greensock does. Does the maths. We have the easing curves which are doing the maths for you. And you can just kind of offLoadIt to the easing.

Jason: That's really, really cool.

Cassie: Let's choose a good one.

Jason: Okay.

Cassie: I really like Expo. Expo ease. Yeah.

Jason: Okay.

Cassie: You can see down at the bottom, Expo.easeOut. If you click on the easeOut. There's ease in and easeInOut as well.

Jason: Okay. So, if I wanted to use this -- where did I go?

Cassie: If you want to copy it, just type the easeInOut bit, or you can just type it. You can do that.

Jason: Do that over in here. So, we do --

Cassie: Do another line and say ease.

Jason: And then is it just like?

Cassie: In little quotes say "Expo." And then --

Jason: What was it?

Cassie: And then .out.

Jason: easeInOut. And then was the Y on that?

Cassie: Oh, no, that was a large E. easeInOut.

Jason: Okay. And is that just gonna work for us? Let's see. Wait, save. Save first and then -- then run it. I think I did it wrong. Why -- what am I doing wrong?

Cassie: You did it right.

Jason: Is that --

Cassie: It's -- we can change the duration to like two, maybe.

Jason: Oh, it did -- okay, you're right. It was just too fast.

Cassie: Yeah, that's the one. Cool.

Jason: Oh, did I -- I think I'm in -- this is v2, so, I need it to be v3.

Cassie: Yeah, you need to be in 3.

Jason: Thank you, chat. So, now I need -- now what am I using?

Cassie: I didn't notice that. It's still the same, though.

Jason: Just lower case expo.out.

Cassie: I was wondering that. It should be a little E. But it wasn't.

Jason: So, you can do this as well.

Cassie: And .E is the default. You can do the expo.

Jason: Ease in, then it starts up, speeds up and slows downs again. That's really nice. I'm ready. Yeah, that did exactly what we wanted.

Cassie: Yeah. Awesome. So, yeah, so, this is just like a rectangle, right? And that's a little bit boring. Well, it's fun, it's fun. But it could be more fun. So, let's use this as a mask on an image.

Jason: Okay.

Cassie: So, if we go into our SVG... the first thing, I guess, is adding an image into our SVG. So, in SVG, we can use image tags like we do in HTML, but they are image tags, not img. So, it's i-m-a-g-e.

Jason: Got it, okay.

Cassie: And then we can do X equals zero and Y equals zero and height, 100%. Width, 100%, again.

Jason: Okay. Width 100%. And then do we -- I need to find an image, I assume?

Cassie: Yeah.

Jason: Okay. So, let's go to unsplash. We have a request for piglets which, chat, I understand your motivation, but I'm feeling a little bit betrayed. Oh, this is a good piglet, though.

Cassie: That's a good piglet.

Jason: You win. I was going to be mad at you for not doing corgis. This is what we can do, this is image X under the hood. We can tell it to crop.

Cassie: Piggies! Oh, they're so cute.

Jason: I think we even do -- no. It's crop entropy, I think? And then it should actually show us a piggy in the center. Neat. So, now we have this little centered piggy. And is it sourced, still?

Cassie: Href.

Jason: Href.

Cassie: Yeah.

Jason: Okay. There's our piggy.

Cassie: There's our piggy. We have a square SVG. It looks like it is the perfectly proportioned piggy. But if we were to change the viewBox in our SVG and we were to make it twice as high as it is wide. If we said height 100%.

Jason: We said height 100%.

Cassie: Okay. Interesting. So, it hasn't stretched. And I think that's because the preserve aspect ratio for images must be different than SVG. That did a different thing from what I was expecting. But anyway. So, the scaling of images and SVG in general, it's kind of down to preserve aspect ratio. So, we can use preserve aspect ratio to kind of change it.

Jason: Okay. Cool. I'm just dropping a link to the URL parameters that you can use in Unsplash. And so, if I say preserve aspect -- do I say it in here? Or do I add it as a CSS prop?

Cassie: In the image so it's an attribute. You can have preserve aspect ratio. A lot of people see it on an SVG element -- SVG itself. But you can actually use it on things inside an SVG as well.

Jason: Okay. And is this -- is this camel cased?

Cassie: Yeah, preserveAspectRatio. All big letters.

Jason: Okay.

Cassie: Okay. So, preserveAspectRatio is basically like background cover and contain. Like we have in CSS, but it's SVG-world version of that. So, rather than cover and contain and background position, we have -- I'll give you an example. So, if we go preserve aspect ratio equals.

Jason: Equals.

Cassie: And then quote. And we're gonna say x mid. So, little letter X, capital letter M-i-d, I think. And then I think it's capital Y, capital M.

Jason: Like, spaces?

Cassie: No spaces. So, capital Y, capital M.

Jason: Okay.

Jason: Capital Y, capital M.

Cassie: Not what you would expect, yMid. And then slice after that.

Jason: Okay.

Cassie: Oh, I think that says xMidYMin.

Jason: YMin.

Cassie: And then a space between slice and yMin.

Jason: And the slice is lower case, then?

Cassie: Slice is lower case.

Jason: Yay! There we go.

Cassie: Okay. Cool. That was kind of complicated to write out. But XMid and YMin. Oh, yeah, we could do XMid -- someone in the chat's got me confused because they were saying XMid YMid. You could also do XMid and YMid. The XMid is where that's positioned on the X and Y axis. That's saying X and Y in the middle.

Jason: Okay. So min would be at the top of the SVG and YMax presumably would be the bottom of the SVG?

Cassie: Yep.

Jason: I get that. We have left, center, right, top, middle, bottom as our options for positioning.

Cassie: If we change that to slice to meet rather than sizing up and slicing off the excess, it will size up until it meets the SVG container.

Jason: Gotcha.

Cassie: So, if you change YMid to YMin now, you can see it going up like a little elevator.

Jason: Okay.

Cassie: And then XMax would go down.

Jason: Perfect.

Cassie: That's how you do sizing images in SVG.

Jason: And so, if we want to cover, which is what we probably want to do in this case, we use the XMid, YMin slice, that will center the image and fill the available space.

Cassie: Yep. And we can make the viewBox back to a square because we are done demoing that.

Jason: Now we've got a happy little piglet.

Cassie: Awesome. Our image is on top of the rectangle that we drew. That's because SVG has an explicit drawing border. So, anything that we draw after something else will be on the top. And what we're going to do is we're gonna put that rectangle into a max now. We're going to create a mask element in the SVG. We'll make it the first thing in our SVG.

Jason: It's going to be like this, like a group kind of a thing?

Cassie: Mask, mask.

Jason: And just put the rectangle inside --

Cassie: Put the rectangle inside it.

Jason: Okay. Okay. And for all intents and purposes right now this is -- did this just kind of pull it out of the we can't see it at all now?

Cassie: Yeah. We can't see it at all. It's in a mask so it's not directly rendered.

Jason: Okay. Perfect.

Cassie: Awesome. So, we're going to give the mask an ID. So, ID --

Jason: The mask itself gets an ID.

Cassie: Yeah, the mask element itself. ID equals my mask. Or whatever you want to call it. Yeah. That's so that we can assign the mask to something.

Jason: Okay. That makes sense. And so, then I assume here if we want to mask the image, now we're going to use that ID.

Cassie: Yep. That's what we're going to do.

Jason: Okay.

Cassie: So, we are going to use that ID by saying mask = myMask. Awesome. And then -- oh, no, it needs URL. URL, mask equals URL. And then brackets and then a hash. Yeah.

Jason: Look at it go.

Cassie: Awesome! So, what you might notice is that the image has just kind of turned this fady color.

Jason: Yeah.

Cassie: And that's because masks use alpha values to mask things.

Jason: Oh, okay.

Cassie: So, clip paths use geometry. If this was a clip path, it would just use the geometry of that rectangle. But masks, they will show anything under a white pixel and they will hide anything under a black pixel.

Jason: Got it, okay.

Cassie: Yeah. So, that's really cool because you can use like gradients and stuff.

Jason: Right.

Cassie: So, I kind of like to think of masking as it's kind of like -- like collage whereas clipping is like cutting out. So, clip paths are like scissors if you want to chop something out with some geometry. And if you want to kind of fade something, then you want to use masks.

Jason: Got it. Okay. So, yeah. This is -- that's very cool. And then if we -- yeah, so, if we want something in the middle, we just do like a gray and then it's -- and that makes it semi-trans parent, right?

Cassie: Yeah.

Jason: Yeah. We can see the little bit of blur back here coming in. Wow, that's cool. Okay.

Cassie: Yeah. It's very cool. I really like -- oh. Look at -- we'll get to that in a bit. So, yeah. We can take the border off the SVG.

Jason: Okay. Let's do it.

Cassie: Because we kind of got stuff in it. So, you can see...

Jason: Bye, plum.

Cassie: Bye, plum. Oh, how long do we have as well?

Jason: We have about 40 minutes remaining.

Cassie: Sweet! Loads of time. Okay. Cool. So, yeah, that's an image mask, basically.

Jason: Yeah.

Cassie: And that's like -- it's a really cool technique to be able to do. And you can animate, you know, image masks on things when the page loads and stuff.

Jason: And I also like what I love about this is that what we just did seems challenging. Like it seems like a lot. But really, what we've done is we drew a box. We set that box as a mask. We loaded an image. And then we told it to use that mask. And even without this. So, like we could drop out the GSAP stuff and then we could just make this rectangle 50% wide or something.

Cassie: Yeah.

Jason: And now we can draw like, you know, a rectangle is a rectangle. But you can draw custom shapes and stuff in here. And now we've got control, we can make custom image shape borders and stuff and we don't need a library or anything. We can hand-code this. That's really exciting.

Cassie: And the other cool thing as well is you can use SVG masks like elsewhere on other HTML elements.

Jason: Really?

Cassie: For the ease of use in this demo, I've got an image inside of an SVG. But we can also have an image tag and apply the SVG mask to it in CSS.

Jason: Oh, okay.

Cassie: Someone asked if I'm doing guides or courses. I'm doing a course with Smashing in February. Come to my course.

Jason: How do I find that?

Cassie: I think it's, yeah.

Jason: SVG An nation Masterclass.

Cassie: Yeah.

Jason: These Smashing -- I love the format. Goes across multiple days. Short sessions. You can learn something and let it sink in before you move on to the next thing. Unlike workshops where you have information drilled in for a full day and retain a little bit of it. I really like these formats. This is going to be a great one. Go get a ticket.

Cassie: I also have quite bad anxiety and imposter syndrome and all that kind of stuff. When I was writing the workshop, I deliberately wrote it so that people wouldn't feel like left out or stupid. Like everything is like there for you that you need to know.

Jason: I love it. I think I -- I think I linked to the wrong one. This is the right one. February. Go get the February course. That's the one. The other one is over.

Cassie: The other one, we've already done that.

Jason: But, yeah. Okay. So, now that we have a masked image, what would you like to show next?

Cassie: Okay. So, let's do -- oh, what should we do next? Okay. Let's do a cool Greensock thing.

Jason: Yes!

Cassie: It's going to involve you drawing more rectangles in your SVG.

Jason: Well, fortunately thanks to you, I'm now a rectangle expert.

Cassie: A master of rectangles. What we're going to do is draw 10 rectangles that are all the height of the SVG, but only 10% of the width.

Jason: Okay. And am I doing that in a mask? In the mask.

Cassie: Yes, in the mask.

Jason: Okay. So, we'll get one of these set up. Do they need a class, right?

Cassie: Yes. So, you can give them all the same class. We can give them a class of rectangles.

Jason: The most descriptive -- yes. This is going to be great. This one is going to be X0 and y = 0 and width, if I can write, 10%. And height 100%. And then if I copy-paste this, one, two, three, four, five, six, seven, eight, nine, ten --

Cassie: You need to give it a fill first.

Jason: No! Let's undo all that have.

Cassie: Go back.

Jason: I need a fill of white, I assume?

Cassie: White.

Jason: Now I'm going to copy-paste. One, two, three, four, five, six, seven, eight, nine, ten. And because it's 100%, I bounce the X over by 10 at a time, right?

Cassie: Yeah, 10 at a time.

Jason: 40, 50, 60, 70, 80, and 90.

Cassie: 90. And we can get rid of our original rectangle that we're animating. Yeah. Rectangle master at work. Taught you well, Jedi.

Jason: Did I -- oh. Oh, man. I still -- I still managed to screw it up. But we're okay. We're back. All right. So, here's -- we've got all of our rectangles. I've taken off the main one. And so, now --

Cassie: If we go to our Greensock and we say "Rectangles."

Jason: Got it.

Cassie: And let's change xPercent to Y.

Jason: Okay.

Cassie: What we'll see here, it will target all of them together. It's using document.query under the hood. It's getting the rectangles. That's the same as before. But with Greensock, you can do staggers. And staggers are super-cool and it's only a tiny bit of code as well. We can say, underneath duration --

Jason: Okay.

Cassie: Someone asked if I stream. I streamed once and someone was really horrible to me.

Jason: No!

Cassie: But I have done two Twitch streams with other people. So, maybe sometime in the future. So, yes. Stagger.

Jason: Stagger.

Cassie: And then say 0.1. Let's do that.

Jason: Whoa! Jeez. That is -- that was so much -- again, just kind of blown away by how approachable this all is. It's, you know, again like when we started, I was saying that one of the things that overwhelms me about G SAP. Holy buckets, did that just work? Holy buckets indeed. If we are going to do 10 animations, start each one .10 seconds after the one before it?

Cassie: Yes. And you can pass in the on to stagger as well. Right now we have the most simple stagger. If you were to pass in an object instead of 0.1.

Jason: Object, so, some curly boys.

Cassie: Curly boys.

Jason: And then what?

Cassie: We can just say -- let me double check. Double check in the docs. It's each.

Jason: Each.

Cassie: And 0.1.

Jason: Okay.

Cassie: That will do what we did before. That's the default. You can also do a mount. So, if question did a mount, a mount -- instead of each -- yeah. Maybe do 0.4 or something. Because 0.1 will happen really quickly. Yeah. There we go. So, a mount, that's the whole time we stagger the elements.

Jason: Oh. If we want to take a full second to start the transition, we can do it like this. And the difference between the one on the left and the one on the right starting is 1 second?

Cassie: That's it. So, the whole animation duration will be 1 second.

Jason: All right. That's really cool.

Cassie: We can also say from.

Jason: In stagger?

Cassie: Yeah, so, on another line.

Jason: Oops. Let me roll back to one from --

Cassie: From. And we can say in quotes, center.

Jason: Ooooo...

Cassie: Which is cool.

Jason: Oh, that's fun. Okay. I love it.

Cassie: And we can do from end, I think is one of them. So, that will go from the end. Someone says from random. I didn't know you could do that. Let's try that.

Jason: What? Oh, it's beautiful. Look at that.

Cassie: I love it so much. Hey, I thought it was meant to be me teaching you. I'm learning things. Learning with Jason!

Jason: I'm into it. I'm so into it.

Cassie: Cool. So, yeah. That's -- that's kind of some fun staggering with Greensock. What should we do next? Oh, scroll trigger. Let's do scrolling.

Jason: Yeah, let's do it.

Cassie: That was the whole point of this. Getting distracted by the piglets.

Jason: It's an easy thing to do.

Cassie: Yep. So, yeah. If you go into the CSS and you make it like 500 high.

Jason: Right. That was the body. We went 500 --

Cassie: 200 or whatever. Whatever amount of hundreds you want to.

Jason: Okay. So, here now, we do it like this. Then we're able to scroll five times the height of the viewport.

Cassie: Awesome. So, let's put the piggies further down.

Jason: Okay. And do you want me to do that with like a position fixed or?

Cassie: You can do like a margin top. That will work. Maybe I'll do streaming if people will be nice to me.

Jason: Look, the chat here, we will go to war for you. We'll take people out.

Cassie: I'll think about it. Maybe next year. Someone's like, bonk the idiots.

Jason: Yeah. What I've noticed is like on this stream, you know, we've -- we've got a couple mods that do a great job. You know, like Tony is in here and a couple folks who hang out. And if anybody comes in and does nonsense, they immediately get kicked. It sets up a community standard. It was a little bit rough at the beginning, but now that we've got good mods in place and people paying attention, it stays pretty positive in here.

Cassie: Yeah, it feels nice and full of nice people in this stream.

Jason: Be nice or get out. Absolutely, Brandon, that's the motto here. Okay. So, I've -- I've bumped this. It's roughly halfway down the page now.

Cassie: Awesome. So, we want to be triggering this on scroll. So, we need to use scroll trigger for that.

Jason: Okay. And we brought that in already. So, that's in our -- it's in our document.

Cassie: Yeah.

Jason: Okay.

Cassie: So, I think it might be good to go to the Greensock docs, actually.

Jason: Okay.

Cassie: Just have a little look so that people know where to go to and so that I can steal snippets.

Jason: Oh, wait. I need the docs. Docs for ScrollTrigger.

Cassie: I always go to the home page and it has landing music and I always get dun, dun, dun, dun! In my headphones. It's very dramatic. And I've done it 20 times and I never learn. Scrolltriger is basically a replacement for ScrollMagic. A lot of people were trying to use ScrollMagic and Greensock to play nicely together. It was a little bit difficult to do that. So, Greensock were like, well, everyone wants to do scroll animation. So, why don't we make a good scroll plugin? And I'm a big fan because they are -- they're very hot on performance at Greensock. And it uses one scroll event listener behind the scenes. So, it just kind of adds things to that one listener.

Jason: Nice.

Cassie: it does it in a really good, performant way. I think scroll animations can be a little bit hefty sometimes.

Jason: That's something I've noticed. You go to a site and it looks beautiful. But if you scroll beyond the slowest possible speed, the whole page jutters and jumps and your laptop starts to lift off the table and the fans fire up. And so, hearing that actually makes me really happy because I've always loved the idea of doing these real interactive scrolls. But a lot of the thing that keeps me away is that I didn't think they would be performant.

Cassie: You can see here, there's no scroll jacking. They do thing in a responsible way. You have to be responsible. With animation, with great power comes great responsibility. If you animate everything, it's going to be laggy. There's only so much Greensock can do. But if you're responsible and you're using ScrollTrigger, you're going to be a lot of the way towards a good performant animation.

Jason: If I'm understanding this correctly, all we need to do to make this work is add this one line? Oh, my goodness.

Cassie: It's that simple. It's a lot like the stagger that I showed earlier. There's the simple version and then there's the one where you can pass in an object.

Jason: Okay. I'm going to set up ScrollTrigger, and what do we call this?

Cassie: Give the SVG an ID.

Jason: Give it an ID.

Cassie: Or we can use the SVG, I guess. Piggies!

Jason: Okay. Saved. Assuming we didn't typo anything, when we see the piggies come in, that's when we'll see this animation. Here we go. Look at that. Oh, my goodness. It is amazing. It's currently set up to only go once. Once we've showed it, it doesn't go again. But if I refresh, there we go. There's our piggies. Dang, that's cool.

Cassie: That's super-cool.

Jason: What a truly like effortless way to make that happen, too. Like, that's not what I would have expected, right? Like I think I'm getting a lot of my fears of GSAP kind of reset here. Because I thought this stuff was hard. And what I like is it's not hard, you just have to know what you're looking for. Not necessarily be a genius.

Cassie: You can do really complicated things with it. I have a lot of CodePens where I've really pushed its limits and written loads and loads of Greensock code. If you were a beginner and looked at that, what is that magic? But you can do things with it because it is so friendly to use and the docs are so nice.

Jason: Yeah.

Cassie: I say that the Greensock forms are like StackOverflow but with nice people.

Jason: I like that. That's a strong endorsement.

Cassie: Yep. So, we were gonna do a little liquid mask.

Jason: Okay.

Cassie: But I'm going to give you a path to do that. I've written out some path data. Written out some path data, like I've written out the path data. I've used a graphics editor. Should I send it to you on --

Jason: If you want to throw it into our Twitter DMs, that's probably the easiest.

Cassie: More boops while I'm finding the thing.

Jason: Yeah, flood it. Flood it, chat. Here we go.

Cassie: Yeah!

Jason: And chat delivers.

Cassie: So many of them!

Jason: Just another shoutout while we're waiting. Make sure you go and get a ticket for this course because it's gonna be really good. I know, I'm gone. I'm drowned. I have been booped to death.

Cassie: Well, when we finish drowning in boops, we can make a little liquidy thing.

Jason: Okay. I have the path.

Cassie: Have you got it?

Jason: And I'm coming back, and I'm ready. All right, so --

Cassie: The first thing you should do is put that inside a D attribute in the path element. But we'll do that when people can see.

Jason: Oh, so, we would need to add code. That's right? All right. Chat, chill it out. We've got stuff to do here. I definitely do need like a clear boops. Okay. So... ( Laughter )

Cassie: Oh, I can see the piggies again, yay!

Jason: Okay.

Cassie: Okay. So, not in the mask.

Jason: Not in the mask.

Cassie: Everyone can see it. Let's make it the last element in our SVG.

Jason: Okay. Okay. And so, you said it was in a path.

Cassie: Yeah. In a path.

Jason: And a D element inside of that.

Cassie: D attribute, yes.

Jason: Oh, a D attribute, got it, got it.

Cassie: Yeah, yeah, yeah.

Jason: So, it path self-code something

Cassie: Yes, it is.

Jason: Thank you for the help, CodePen. D?

Cassie: The Ding attribute is where all the cool numerical gubbins go that makes up a path.

Jason: and so, when we look at this, it -- I mean, I feel like this is something that we would probably generate in like Figma or Sketch or something like that, right?

Cassie: Yep. You can draw SVG paths out. I have tried it before with varying levels of success. Basically, what you need to know is that the numbers are commands -- no, not numbers. The letters are commands and the numbers are coordinates. So, the M at the beginning, that command basically means move to this point. Don't draw anything, just kind of pick your pen up and put it down at that point. And the C is like a bezier curve. Yeah, there's lots of different path commands. So, if you're really interested in drawing out an SVG, you can kind of look up path commands on MDN and then just kind of give them a little draw.

Jason: I'm pretty sure that Shirley and I did this. Where -- when did we draw the bucket? I think we drew the bucket --

Cassie: Yeah, someone said Shirley explained these --

Jason: Definitely not this one. This is where we tried to learn NUX and couldn't. I think it was this one when we drew -- it's one of the ones in this series. And so, that one would be a good one. And then I also did -- while I'm in here... Sarah and I did a course where we did -- Ah-ha! Behold! My bucket! That's the one.

Cassie: What was that?

Jason: That was from the episode with Shirley and I when we drew the bucket. We hand-coded our SVG bucket and then I got really excited.

Cassie: Amazing. Behold, my bucket.

Jason: And then this is an episode that Sarah and I did where we dug into some more animation techniques. Something to dig into after this if you want to take this, you know, just get all the Greensock stuff going. So, now I'm in here. I've got a path. I can't see it presumably -- well, actually, probably for a few reasons.

Cassie: It's all the way down at the bottom.

Jason: Yeah. Let's turn that off for a second. I'm going to just comment that out. Come back. Okay. And so, it's a blackbox now.

Cassie: It's because the viewBox is different. We're going to change the size of the viewBox to 800.

Jason: Oh, okay.

Cassie: And 1,000.

Jason: And 1000. Okay.

Cassie: Oh, it's all black. Why is it all black?

Jason: Do I need to add a fill or anything to the path?

Cassie: Isn't quite around the path. I just did little horns, sorry, that's weird. Quite. So, before the M there needs to be a quote.

Jason: This? Is that not right?

Cassie: Yeah, the path needs to be in quotes. Like a string.

Jason: Isn't it?

Cassie: Oh, no, it is. I can see. Okay. So, that should be working. Why is that not working? You want to give it a fill. Let's give it a fill.

Jason: Okay.

Cassie: Oh, no, wait! How did it start? M3 --

Jason: M53.

Cassie: Oh. What did we set the viewBox at?

Jason: 0 0 800 1000.

Cassie: Are we inside the mask?

Jason: No. Let me just comment all of that out just in case. Devil quotes! No.

Cassie: I wonder why that's not working. Wait, I'm going to send you the whole path.

Jason: Okay.

Cassie: Maybe it did something funny. Let's try this again. Try that.

Jason: There we go.

Cassie: That looks like exactly the same thing.

Jason: So, I've got my path... and as far as I can -- whoops.

Cassie: It should be 0 0 800 and 1000.

Jason: Is it... hm. I wonder if I need to like...

Cassie: That should be working. Interesting.

Jason: Here's that. 800. Did I break anything? Maybe I can turn all of this off just in case it's doing something?

Cassie: Yeah, maybe.

Jason: And then...

Cassie: Oh! It might... I'm gonna troubleshoot this here as well.

Jason: Let's see. What do you think, chat? Do you see anything? Self-close is an issue. That would be curious. But let's try it.

Cassie: Maybe it is doing what I thought it should do, but I'm going to put it in a different position. Go into Greensock. Change the color to plum and we can see whether we can actually see it.

Jason: Um.

Cassie: Scroll down. Where has it gone?

Jason: Disappeared entirely.

Cassie: Disappeared.

Jason: What? What? Why did it eat my -- that was bizarre. Did you see that. It ate my path.

Cassie: Okay. So, we can see it. We can see it. I thought we couldn't see it at all. That's fine. Let's go down to our Greensock code.

Jason: Okay.

Cassie: And let's make a tween for that wobble path. So, we're gonna say GSAP.from, wobble.

Jason: And then some curly boys.

Cassie: Curly boys, and move it from the right-hand side. Let's try that.

Jason: Is X --

Cassie: xPercent.

Jason: That's right. And then a hundred. I saw it! Did you see it?

Cassie: No, I didn't.

Jason: I don't know why it's not doing my autosave now. It was there for a brief second.

Cassie: It was there. That's good. I just put it in a different place in the viewBox than I thought I did. Hey! Okay. Cool. So, I made this little wobbly shape. And what I've done with this wobbly shape is this wobbly shame is all the way over in the viewBox and we actually want it to come in from the bottom right-hand corner. So, if you do yPercent 100 as well, then come in from the bottom.

Jason: Oh, yeah, look at it go.

Cassie: It's like a little liquid wobble.

Jason: That's fun.

Cassie: Yeah. Let's change the duration to 2.

Jason: Got it.

Cassie: And then we're gonna just steal the scroll trigger from our previous -- our previous one. So, we're gonna leave the -- yeah. We're gonna leave the rectangles now. No more rectangles.

Jason: Okay. So --

Cassie: We did it!

Jason: Got that. And then because it's in view, it's immediately visible. So, let me move this back down.

Cassie: Cool. And then we're gonna put that shape into the mask. So, we're gonna use that as the mask now instead of the rectangles! Yeah! Someone said it's made them not scared of GSAP. That's cool.

Jason: It also made me not scared of GSAP, which is wonderful news. Now we have --

Cassie: You can get rid of all of the rectangles if that makes it easier.

Jason: I was going to keep them in just so people could --

Cassie: Oh, play around.

Jason: Yeah, continue to play around. And then I'm going to get that out of here and then I'm going to copy this path and we'll move this up into our mask.

Cassie: Yeah.

Jason: Okay. So, now it's in there and it's got an ID of wobble. So, I'm assuming here I change this to wobble?

Cassie: Oh, no, because it's inside the mask. So, we're referencing the mask element itself. And then that's inside the mask.

Jason: Oh... oh! Oh! I understand.

Cassie: Yeah. You can have anything you want inside a mask. I've actually --

Jason: Wow!

Cassie: It worked! And it's fady again because we've used -- we've used plum. So, it's doing that masking thing.

Jason: That's so cool. Okay. So, let me change that.

Cassie: I've actually got a demo where I'm moving around lots of circles inside an SVG mask. But then those circles also have a filter applied to them so they're all gooey and kind of clumping together and it's incredibly non-performant and you wouldn't want to put it on the actual Internet.

Jason: We can also show if we uncomment this... so we can -- and we could even do something like...

Cassie: Yeah. Let's make the little piggy a bit smaller.

Jason: What? Unexpected character? Leave me alone. What have I done?

Cassie: Doesn't look like you've done anything.

Jason: Weird that it did that. Stop yelling at me. And then... wow.

Cassie: Sweet.

Jason: Okay.

Cassie: Make the piggy smaller. Make him like 40% of the -- what is he now? He's quite big. Yeah, a little smaller. And then --

Jason: There we go.

Cassie: Yeah. So, we can use ScrollTrigger now to kind of change how that behavior works. So, at the moment, we're just saying, piggies like scroll -- use the scroll animation when piggies comes into view. But we can pass in an object of different things.

Jason: I got a cool idea from the chat to try a mixed blend mode. That's a cool idea. I like it. That's fun.

Cassie: Cool!

Jason: Good call, chat.

Cassie: It's like zombie piggies behind the text!

Jason: So, I've added a curly boy to the ScrollTrigger.

Cassie: And we've got some zombie piggies. Cool. So, yeah. Scrolly -- ScrollTrigger stuff. So, we're gonna say trigger and we're gonna give it whatever trigger element it is. Did we call our SVG piggies?

Jason: Yes.

Cassie: Yes. Cool. What we can do is we can pass in all sorts of cool things. We can say that we want to pin the element while the animation is playing. So, if we pass in pin true, it will change it to position fixed while the animation is playing and pin it to wherever it is on the screen.

Jason: Oh, cool. Okay. That's fun.

Cassie: Yeah. Have we got a duration?

Jason: We don't, but we have a duration of 2. So, it pins for 2 seconds. Is that right?

Cassie: Yeah, it should do. It is doing that. Awesome. So, what we can also do is we can say scrub and then scrub will tie the animation to the scroll.

Jason: Okay.

Cassie: And you can either say scrub true or pass in a value and that's how long it takes to catch up to want scroll bar. I usually do scrub 1. That's how long it takes to catch up. It feels more natural and less gamified. If it feels -- it's more natural.

Jason: Yeah, so, if I like just tap it, it moves a little bit. And it doesn't -- yeah. Yeah, that makes sense because it all just feels a little cleaner.

Cassie: Yeah. And you can kind of do -- like I had some background elements that were moving on a scrolly site that I just did. And I had scrub set to 4 on that. When they stopped scrolling, there were just subtle animations happening in the background.

Jason: Very cool.

Cassie: That's a nightmare for people that don't like animations on websites. If you do that, do prefers reduced motion.

Jason: Yeah. And prefers reduced -- if you haven't seen this -- reduced motion. This is a setting that you can like check for. And that comes from user preferences. So, that way you can just say if someone prefers reduced motion, don't do this thing. That's a CSS thing that we can check for. And then we can also check this in JavaScript, right?

Cassie: Yeah, you can. We can do that right now, actually.

Jason: Yeah, let's do it, let's do it. It's going to break it on my computer, actually.

Cassie: We can do like a little faux one. I always have an animation as okay variable in my JavaScript. So, we can do const animation is okay. And then you say, window.matchMedia.

Jason: Window matchMedia.

Cassie: Yeah. curly brackets. And then the prefers reduced motion in there. So, it's a slicker -- more curly boys.

Jason: Is it this one?

Cassie: Yes. Prefers reduced -- yeah. So, in the curly brackets. Not with media.

Jason: Okay. So, just this one here.

Cassie: Yeah.

Jason: Okay. So, then I go back over here. Like this.

Cassie: Yep. But then we're gonna say, so, prefers-reduced-motion. After preferred-reduced-motion, semicolon. Yeah. That one. No preference. No-preference. Yeah. Cool. And then the last bit is you have to say .matches afterwards. So, that's checking that matches.

Jason: Right. So, basically, it's saying look for this setting and if this is on.

Cassie: Yeah. Check that it matches.

Jason: I have this turned off, actually. So, we say if animation is okay.

Cassie: Yep. If animation is okay.

Jason: And we'll wrap this here. What we'll see now is this actually isn't going to do the thing. Because I have it disabled, right? So, we don't see the animation at all. And so, because I have that and we want to see it, I'm going to turn this off. And we'll see it come back.

Cassie: Yeah. And that returns true or false so you could do animation not okay and just return out if you wanted.

Jason: But yeah. That's -- that is --

Cassie: It's an important thing to know.

Jason: Okay. Excellent. I mean, this is -- this is really, really cool stuff. And we've got about 4 minutes left. That's probably a good place to call it done. But holy crap were able to get a lot done in a short amount of time.

Cassie: Love it so much.

Jason: Yeah, Cassie, this was absolutely incredible. Thank you for spending time and teaching us today. Where should people go if they want to go further with this? I'm going to start by linking to your course one more time. Go get in on this workshop, get a ticket.

Cassie: Yeah!

Jason: Where else?

Cassie: So, personally, I think that you can learn a lot -- if you're interested in SVG animation, the thing that will help you the most is understanding SVG itself. So, kind of look at SVG masks and clip paths and filters and all of that stuff. And I think the best place to look for that is on MDN. Like just look up the elements and pop them into CodePen and have a play around. And yeah. If you're interested in a particular thing, like always feel free to get hold of me, pop me an email or a message and I'll point you in the right direction. And then the Greensock docs, if you want to be digging into animation, the Greensock docs are really friendly. So, and they've also got loads of CodePens that you can fork. So, you can kind of learn by playing around, which is really good.

Jason: That's always a really nice way to do it.

Cassie: And also, if you find Greensock intimidating and you're just -- you know, you started learning CSS, say, and you're not so comfortable with JavaScript, you can animate SVG with CSS. So, I don't usually animate SVG with CSS because it's quite difficult to chain animations together. And also, there's a few like little cross-browser quirks with SVG Transforms. But if you're playing around and learning things on CodePen, CSS is a really great place to start. So, yeah. Don't -- don't let, you know, fear of JavaScript or whatever hold you back. I think that's where I started. I started making CSS animations with SVG and then I kind of moved to Greensock once I got more confident.

Jason: absolutely. I'm going to throw everyone back to your CodePen as well. That's a treasure-trove of inspiring and exciting stuff. Check these out. Cassie, I think that's the end of the episode. One more shoutout to our sponsors. We've had live captioning through White Coat Captioning, that's always available at lwj.dev/live, thank you to Amanda helping us out today. Made possible by Netlify, Fauna, Sanity and Auth0 who pitch in to make this show more accessible. Check out our schedule as well. We have some really, really fun stuff coming up. Later this week, Tanmai Gopal. That's going to be a lot of fun, and next week, we have John Lindquist coming on to teach us how to write shell scripts in JavaScript. if you want to itemize your computer, you can do that in JavaScript. Cassie, do you have a Twitch handle that you want people to follow?

Cassie: I don't have a Twitch handle. But I think I have to start streaming now after this because everyone was so lovely.

Jason: All right. Keep an eye on Cassie's Twitter then because that's where the Twitch handle will get dropped. And yeah, I think that is it for us. Chat, stay tuned. We're going to raid. Cassie, thank you so much for hanging out and teaching us today. It was an absolute blast. We will see you next time, y'all.

Cassie: Cool. Thank you, all. Thank you for all being so nice!