899: GSAP: Killer Web Animations With Cassie Evans

Scott and Wes sit down with Cassie Evans of GSAP to talk all things animation—from SVGs and scroll timelines to GSAP’s new rebrand and exciting features. They also dig into performance, plugins, and what makes GSAP such a powerful tool for web developers. Show Notes 00:00 Welcome to Syntax! 00:59 What is GSAP? Cassie Codes. 01:53 GSAP Rebranding. 04:44 GSAP under the hood. 05:29 The big announcement! 07:19 GSAP Showcase. 11:01 Brought to you by Sentry.io. 11:26 Why is GSAP easier for animations? GSAP Docs. 12:38 Animating with SVGs. 13:33 The love of SVG. 14:55 GSAP is performant. 16:06 Gotchas to watch out for. 18:12 Does GSAP work with canvas? 19:02 What GSAP projects are you most proud of? 20:30 Does it play nice with web frameworks? GSAP with React. 22:32 What are you excited about in CSS right now? Scroll Timeline. 24:27 Will any of these make their way into GSAP? 26:31 Timelines. 29:24 Building animations with timelines. 34:55 What are the best GSAP plugins? Split Text spanran-wrap. Physics 2D Plugin. 38:44 GSAP docs and philosophy. 39:50 Scrubbing animations by frame. 41:09 GSAP Video Exporter. 41:45 Animating with JavaScript. 45:19 JavaScript in unconventional applications. 47:56 Is there anything missing in web tech? 50:53 What about AI in GSAP? 52:40 Sick Picks + Shameless Plugs. Sick Picks Cassie: Eyesy Video Synthesis. Shameless Plugs Cassie: Smashing Conf. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Speaker names marked ? are inferred from speaking time and the show’s known hosts — they are not voice-verified.

• 0:00Scott Tolinski?

  Welcome to Syntax. Today, we have a really good one. We're going to be talking with Cassie Evans, who is a developer education over at GSAP. So that means we're going to be diving into all about GSAP, what it is, where it's at, why you should be paying attention to it, and just generally why it's so cool. So Cassie, welcome to Syntax. How are you?

• 0:22Speaker 01

  Hey, yeah, I'm really good. I'm very excited to be on Syntax.

• 0:26Scott Tolinski?

  Yeah, well, I'm excited to have you here. We, one, you know, we've been chatting for a while, just in general, but also GSAP, man, is one of those things that like really feels like I, it's been a large gap for me in my knowledge base. And so I'm really excited to be able to just really understand more. I think it's a really exciting time to be talking to you about this, given some, some news that just happened. And in general, I think it's really cool. So yeah, very, very excited. Wes, how are you doing today?

• 0:57Wes Bos?

  I'm good. I'm, I think maybe we should go real quick into like, what is GSAP? For maybe anyone who hasn't used GSAP before, or maybe might not know what it is. So you want to give a stab at what that is, and then we'll, we'll go into the announcements and shortly after that.

• 1:13Speaker 01

  Yeah, sure. So GSAP is a very powerful animation library that you can use to animate pretty much anything. So HTML elements, or SVG, or UI stuff, 3D things, pretty much anything that JavaScript can touch. And it's been around for, woo, like 15 years now. For the, for the people that have been around since the Flash days, they'll remember GSAP as an action script library. So it's kind of been like at the forefront of web animation for a really long time now.

• 1:52Wes Bos?

  Man, and GSAP just had like a major kind of rebranding as, as well, which was, I think, great. Because for the longest time, it was like a, that like superhero man, and it was extremely popular. But I think, I think a lot of people kind of wrote it off as like that kind of whole vibe. Lost it, and the whole, the new design looks amazing. Were you part of that?

• 2:14Speaker 01

  Yeah, that was, that was on my hit list as soon as I started working at GSAP. One of the things about Jack, the library author, is that he's very averse to change, which when you are maintaining a library that's used on like 12 million websites, it's a good thing. It's a really good thing. But I think, yeah, the branding did need an overhaul. I think it had, it had a little bit of nostalgia for the Flash era for people that were around. But like the Gen Z youth, they didn't get the nostalgia. They were just like, why is there this green man with a superhero cape?

• 2:53Scott Tolinski?

  So, so is G Sap, because I remember this as Greensoc. Is Greensoc and G Sap the same thing? Just a rebranded kind of way of referring to it?

• 3:03Speaker 01

  So, yeah, Greensoc is the company name and G Sap is the library. So G Sap stands for Greensoc Animation Platform. But we kind of found that people were using G Sap and Greensoc interchangeably. So it was just kind of easier to just lean into the G Sap side.

• 3:23Scott Tolinski?

  That makes so much sense. You know, I always thought the animation library was, was Greensoc. And, and I hate to say this, but its name turned me off from like using it. I was just like, Greensoc? I don't think about Greensox. G Sap, though, the branding on it rules. It looks great. The landing page looks great. It all feels super modern. The whole thing is just great looking. So I, it seems so dumb to say that, but I do feel like I'm way more inclined to pick this up based on its like current iteration of its aesthetic.

• 3:53Speaker 01

  Yeah, I mean, I understand that. I actually, before I learned G Sap, I started with Anime JS, like way, way, way back in the day. And that was entirely because I was new and they, they had the jazzier site. And then I kind of hit up against some walls and realized that G Sap had a bit more power to it. But yeah, visuals, first impressions, they're important.

• 4:19Scott Tolinski?

  Yeah.

• 4:20Wes Bos?

  Your own website personally, is that using using G sap as well? Because it's it's one of those websites that has like whimsy on it.

• 4:28Speaker 01

  This is, yeah, I feel like my website is G for an overhaul. I'm too busy helping everyone else make

• 4:34Wes Bos?

  Oh, man.

• 4:34Speaker 01

  Nice websites. So it's very Cassie circa a few years ago, I think. But yeah, using G sap everywhere on there.

• 4:43Wes Bos?

  That's good. So is G sap? Basically, it's JavaScript library for doing animations and scrolling things in and architecting pretty much. If you ever land on a website that is extremely interactive and has like beautiful animations, there's a high probability it's using G sap. Are those animations using what? Is it using CSS? Is it using the Web Animations Library? What's going on under the hood?

• 5:11Speaker 01

  It's just JavaScript. So sets like inline transforms on DOM elements, but it's kind of animating objects. So yeah, if you're using it for, you know, objects in 3JS or something, it's just kind of directly manipulating the properties.

• 5:29Wes Bos?

  Let's get into the the actual announcement because you've got like a little sneaky thing to tell us.

• 5:33Speaker 01

  Yeah, so it's super exciting. We've just announced that we're making G sap entirely free for everyone, which is possibly a strange thing to say about an animation library because people are used to libraries being free. But the reason that G sap has managed to stick around for as long as it has is because we had some club plugins, like some little bonus extra animation goodies that we put behind a membership subscription. And that kind of gave us a funding mechanism to carry on with development and community support and making demos and stuff. And yeah, all of that is free now. So.

• 6:15Speaker 01

  Very exciting.

• 6:16Wes Bos?

  And that's because G Sap was was bought by Webflow, right?

• 6:20Speaker 01

  Yes. Yeah, yeah, it is. So we've kind of been nestled up inside, inside a big corporate. And they've been able to lift the paywalls for us, which is really, really.

• 6:31Wes Bos?

  That's awesome.

• 6:32Speaker 01

  Yeah.

• 6:32Wes Bos?

  And it's wild to me that, like, you don't necessarily have to talk about Webflow. I don't want to put you on the spot there. I'm just saying, like, talking about Webflow as as like a big company, man, I remember back when when Webflow was just just several people, you know, and cranking on and they've built such a a cool platform. Some of the websites that like look the best or have like the best interaction are often on Webflow. We did this little video a couple. When was that, Scott? Maybe a couple of months ago where we're trying to guess?

• 7:04Speaker 01

  I watched that one.

• 7:05Wes Bos?

  The tech stack behind it. You're like, is this Squarespace or is this Webflow? And it's kind of funny how you can just like almost smell what a website has been coded on based on like the the interactions behind it.

• 7:19Speaker 01

  I am. I had a really similar thing where, um, so I do a lot of things at G Sap. One of the little side projects that I have is I kind of post my favorite sites and add them to the G Sap showcase. And when people submit showcase, I ask what tech stack they're using. And I started getting loads and loads of Webflow sites. It was probably like about a year and a half ago. Before then, it was all like, you know, React, Astros, felt, whatever, 11 T. And then all of a sudden, just loads of Webflow sites. And there was a little bit of me that as a developer, I was like, no, that's a that's a website builder.

• 8:00Speaker 01

  Like, sure, surely not. Um, but we saw more and more of them. And I think what was happening was Webflow was kind of being used to make the design process faster and easier. And because the design process was faster and easier and people could build out a site quicker, they had more space in the budget for the extras. So like really talented creative developers who write G Sap animations and code were being brought on to kind of add a bit of polish.

• 8:31Wes Bos?

  Speaking of this showcase, if you will, we'll have a link to the showcase in the show notes. But man, if you want to get a good idea for like what G Sap is capable of, this showcase is.

• 8:44Scott Tolinski?

  Just a phenomenal place to do that. I'm just like watching these things and just feeling feeling like just inspired because there's so many crazy animated designs on here that looks so good. Man, what is it about GSAP users that allow them to build this kind of stuff? Holy cow.

• 9:02Speaker 01

  Yeah, it's, I mean, it's a really fun library. Um, I, I actually learned how to code through GSAP. Yeah. When I was first learning JavaScript, I, I am, I didn't really connect with a lot of the tutorials online. I'm sure you've had a similar kind of experience where it was like, you know, fizz buzz and logging out stuff to the console and array methods and stuff. And I was like, I'd, why? I don't understand the real world. Like, what is this doing? This is just wiggling some numbers around. And then, yeah, I discovered GSAP and like building fun, kind of creative coding, generative art stuff. That was kind of how I really got my head into JavaScript.

• 9:47Wes Bos?

  Yeah, I, I, I love that stuff as well. Like, if you want to be, if you want to learn something, you have to pick up something that is really exciting to you, right? And I'm, I'm the same way as well, to a point where I ban the use of, of fizz buzz or, or foo bar baz from all of my tutorials because it's just, it's certainly a lot of people enjoy that. They love being able to just single it out and look at what foo bar baz is. But for, for a lot of other people, they want to, they want to have delightful stuff. They want to be able to make something that's exciting. They want to be able to show people what it is they're doing and not just like showing 99 balls of beer on the wall. So that's really important.

• 10:26Speaker 01

  Yeah, you, you've both done like a really great job of that in the past as well, teaching people with like building fun things. Um, yeah, I think that's like, that's what GSAP is for me is, is so many people, they start learning GSAP and it gives them this just, I mean, it's the reason that we used to have the superhero guy as the logo because it does feel like it's been, it gives you superpowers. You can suddenly do anything and. It's a really friendly API. And when you get that flexibility, you can just kind of build anything that you can dream up.

• 11:02Scott Tolinski?

  And if you want to see all of the errors in your application, you'll want to check out Sentry at sentry.io/syntax. You don't want a production application out there that, well, you have no visibility into in case something is blowing up and you might not even know it. So head on over to sentry.io/syntax. Again, we've been using this tool for a long time and it totally rules. All right. So what is it about Gsap that makes it easier to animate with than, let's say, like other animation libraries? There's so many out there, like what, what makes Gsap special, I guess? What is the, the secret sauce?

• 11:40Speaker 01

  So, yeah, I think I wouldn't say Gsap is easier to animate with than other animation libraries. There's like some very specialized animation libraries that are good for particular frameworks and for doing particular things. But what you get with Gsap is, you know, just a lot of flexibility and robustness. So because it's been around for a really, really long time, Jack's kind of seen what animators wanted to do from back in the flash days on what they were struggling with. And he's kind of built the tools around that. I always say, I'm obviously very biased, but I redid all of the Gsap docs. I've been using Gsap for years and years and years.

• 12:22Speaker 01

  And every time I build something really challenging, I will inevitably run into like a wall or a problem space. And I'll check the docs and there'll be something there for that problem space.

• 12:35Scott Tolinski?

  Just been around for so long. And one like areas is this works entirely with, with SVG as well, right? Like if you wanna, it's one thing to, to animate a div around and, and make a, make a div drag and drop and, and add some easing to that. But a lot of these like extremely complex UIs, they're, they're pretty heavy on SVG, aren't they?

• 13:00Speaker 01

  Yeah, yeah, definitely. So, I mean, that's the most exciting bit for me.

• 13:07Speaker 01

  About the GSAP being free announcement is the fact that all of the SVG plugins, the previously paid ones are now open for everyone. I absolutely love SVG. So we've got stuff that helps you morph SVGs, draw lines in all kind of different directions, animate along motion paths, edit motion paths in the browser, all sorts of stuff.

• 13:32Wes Bos?

  That's, yeah.

• 13:33Scott Tolinski?

  What is it about SVG that some people just, just get really deep into it? Cause it's not, it's not an easy thing to, to learn, right? There's, it's this, it's almost its own like area where people specialize in it and they have like layering and there's all these different, like, I forget what it is. Like, I remember I got really into like different blur, different types of blur in SVG and like, I don't know, can you speak to that?

• 14:00Speaker 01

  It's like having, it's like having a little Photoshop slash vector editor in the browser. Yeah. I think for me, I came into coding from a design background. So when I was trying to do a little career swap, there were just lots of things that I didn't quite get at the beginning. And it was actually SVG and GSAP together that I was like, oh, it's just vectors in the browser and like paths and oh, I can animate them. And it was, I was used to kind of design programs and animation programs. So it was just that, but on the web, which was fun.

• 14:35Scott Tolinski?

  Yeah. It's so funny. I, I came from more of like a Photoshop background. So I was like slicing up raster images and just like whatever I can do to throw an image background on whatever. And I never got into vector until I got into web stuff or more SVGs. I can see how that would absolutely lead to that. One thing I noticed about GSAP sites is that they're often like very smooth.

• 15:00Wes Bos?

  Yeah.

• 15:01Scott Tolinski?

  Is there something special about it that makes it performant? Or is it just like, like you said, like the history of optimizing and optimizing? Like, it really does feel like anytime I hit a GSAP site, they are distinctly smoother.

• 15:14Speaker 01

  I think a lot of what people feel um about smoothness is easing.

• 15:21Scott Tolinski?

  Hmm.

• 15:21Speaker 01

  So there's, there's still, you can get yourself into tricky spots um when you're animating, whether you're using GSAP or you know, any animation library, if you animate the wrong things, for example. So I think the sites that use GSAP that are very, very smooth, they're doing a lot of transforms and opacity, like the safe kind of hardware accelerated animations. GSAP is very performant under the hood though um as well. But yeah, you can still, you can still get yourself into problem spaces if you're like, I'm going to animate filters all over my website.

• 15:59Scott Tolinski?

  Oh, yeah.

• 15:59Speaker 01

  I'm going to animate box shadows everywhere.

• 16:02Scott Tolinski?

  We're going to have new elements show up, animate on and, oh yeah.

• 16:06Wes Bos?

  Are, are there any like, like gotchas that we should, you should look out for, just in general? Things that can kind of be expensive, um that can cause a frame rate to drop?

• 16:16Speaker 01

  Yeah, so I think the top ones would be animating the wrong properties and by wrong properties, like my top wrong properties would be like filters and box shadows. Filters are horrendous for animation. I think you sometimes see people doing tricks with box shadows where they have, rather than animating the properties of the box shadow itself, they kind of animate the opacity of a box shadow in a pseudo element and stuff like that. So yeah, it's good to animate where you can transforms and opacity. Those are like the safe zippy ones. Um and then also like, think about what's happening with your animations when they're off screen. Make sure that you're

• 17:01Speaker 01

  kind of killing things, reverting things, pausing things, that sort of, sort of thing.

• 17:05Wes Bos?

  Oh, yeah.

• 17:06Scott Tolinski?

  I had the craziest slowdown issue with the site I was building where there's just like a massive grid of squares and when you click on them, the square changes the background. And I was animating the background color just from transparent to color and the frame rate on the site was crazy bad. And I was just thinking like, this is so weird. And then sure enough, I just did it with a, uh, after pseudo selector and animated the opacity and all of those issues went away. So.

• 17:32Wes Bos?

  Definitely important to know those things if it can get you into some odd troubles sometimes for sure.

• 17:39Speaker 01

  Yeah, I think as well, like choosing the right tool for the job because there's differences between HTML DOM elements and SVG elements. And canvas as well. So if you're doing something really, really jazzy, going the kind of canvas shaders route is probably the best. And then if you are animating, you shouldn't animate too many SVG elements. That's kind of another rule. DOM elements are a little bit more performant.

• 18:11Wes Bos?

  Oh, interesting. And GSAP works with with canvas as well then. So there's, there's things you can render to it. How does that work? Is it, is it like the whole API works also in canvas? Or it's like basically when you're deciding, when you want to build something, do you decide? Should this be DOM elements, SVG or canvas?

• 18:31Speaker 01

  Yeah, when you're, when you're building something. So GSAP doesn't do any rendering. It's just kind of the tool that whizzes stuff around after you've, you've put them on the screen somehow. And so what you put on the screen is up to you, whether you're like rendering a 3JS object or whether you're using an SVG or DOM elements.

• 18:49Wes Bos?

  Oh yeah, it's just doing, doing the math of figuring out how often, how frequent, how much it should, should move it around.

• 18:58Speaker 01

  Yeah, just kind of wiggling the numbers around behind the scenes.

• 19:02Wes Bos?

  Oh, yeah. What's some of the most like, I don't know, do you have any, any stories or any crazy stuff that, that has been built with, with GSAP that you just love pointing to?

• 19:12Speaker 01

  Oh, that's a really good question. There's so many things in the GSAP showcase, website wise. I always really like it when I see big companies using GSAP, like Adidas uses GSAP a lot. I don't know, am I allowed to say names? Big companies.

• 19:33Wes Bos?

  That's always the thing. I'm like, is, are we allowed to do that?

• 19:36Speaker 01

  Bleep them.

• 19:38Speaker 01

  But yeah, there's a, I really like it when people make games with, with GSAP. That's always really fun. There's also, uh, I've seen GSAP being used in hardware as well. So, um, I think there was like a car vehicle UI that had GSAP under the hood.

• 19:58Scott Tolinski?

  Oh, yeah.

• 19:58Speaker 01

  Which is quite interesting.

• 19:59Scott Tolinski?

  I love looking through the car's software license in their UI stuff. I actually, I had to turn down a job to do that at, at GM. It was actually really like, I, I would have taken the job. And it was a GM. Yeah, I think it was GM. It was a good job, but then I was working at Ford at the time and they, they matched the, the job offer. So I was like, okay, well, I mean, I guess I, since I laid that down, I can't go build car UIs, but it was with JavaScript and HTML. So all that stuff is in your car. It's in your UIs. It's, it's all over the place. Does GSAP play nice with web frameworks? I think that might be a bit of a concern for some people who are only like, oh, I use React this or that to do all of my animations.

• 20:39Speaker 01

  Yeah. So you, you can use GSAP anywhere. Um, but, uh, React is, um, historically a little bit trickier. Um, people were struggling a little bit. So we came out with a hook. Um, so they use GSAP hook. So you can import the hook. And then under the hood, that kind of handles all of the animation cleanup for you. It's basically an effect that handles animation cleanup and scoping. And like a few other little helpful things. It's obviously, it's a different way to approach animations from, a, a lot of React people are used to declarative and just kind of popping stuff on your JSX.

• 21:21Speaker 01

  But imperative animation gives you a lot more control. So it's kind of there for if someone, you know, that's what people use effects for, isn't it? To kind of jump outside the paradigm and do, do the fun things. Um, so it's, it's there if people want it.

• 21:38Scott Tolinski?

  I just was looking on the website and sure enough, there's a video of you talking use G-SAB hook. So yeah.

• 21:45Speaker 01

  I hate that my face is in all the thumbnails. I got suckered into having to put my face on the thumbnails for the algorithm.

• 21:54Scott Tolinski?

  For the algorithm. I know. When we started worrying more about the YouTube algorithm, it's like, all right, we have to do this, we have to do that. And it's like, oh, you've resisted for so long, but it didn't really make an impact.

• 22:06Speaker 01

  It gives me a jump scare every time I look through the docs. And I spend half of my life in the docs tweaking things and just my face.

• 22:14Wes Bos?

  Oh, that's our videos show up on like our TV when like my kids are flipping around or I'm trying to watch something and then it's just like boom, huge Scott and me. I'm like, whoa, you know, I was not expecting that, you know?

• 22:29Speaker 01

  Internet famous.

• 22:30Wes Bos?

  Yes. Have you been keeping up with with all that's been going on with CSS in the last, I don't know, year, year and a half or everything that's been going on there?

• 22:41Speaker 01

  Has anyone managed to keep up with all that's been happening with CSS?

• 22:45Wes Bos?

  Have you been trying?

• 22:46Scott Tolinski?

  Right before this.

• 22:47Speaker 01

  I've been trying.

• 22:48Scott Tolinski?

  Yeah, right before this, we recorded an episode that was like, here are some things that flew under the radar that are now like in all of the browsers. And I think half the stuff I didn't know about, and we've done episodes like this several times before, but it was just like, shape exists, this exists, like zoom. Yeah, it's crazy.

• 23:06Speaker 01

  I haven't heard of those ones. I feel like we got tricked because for so many years, I would remember going to conferences and they'd announce a new CSS thing and everyone would get hyped and then they'd be like, but you can't use it yet. And then you'd have to wait for a few years. Whereas what's happened now is there's just with Interop, everything is just hitting so much faster.

• 23:28Scott Tolinski?

  It's great. Yeah.

• 23:29Wes Bos?

  It's really good. I'm really excited, but I'm curious if there are any specific parts of that that you are excited about, either for animations or just like building beautiful things on the web in general.

• 23:41Speaker 01

  Um. I think animation wise scroll timelines very exciting.

• 23:45Wes Bos?

  Um.

• 23:46Speaker 01

  So I mean, I'm a, I'm a, I'm a GSAP gal, but before I started working for GSAP, I was working for a company called Clearleft. And we were like very, very focused in on um performance and like browser standards and that kind of thing. So um for the event sites, we could kind of go crazy and use D S A P and make like silly nonsense. But there were a lot of um design systems that we were building out where we weren't using external libraries. Um. Just kind of trying to use what was available on the web. So yeah, that sort of thing. It's, it's really nice to be able to have like a CSS alternative.

• 24:26Wes Bos?

  Yeah. Yeah. Totally. And do you think any of these things will ever like make its way into to GSAP? I'm thinking about like, like starting style or allowed discrete view transitions, things like that.

• 24:41Speaker 01

  New transitions is, is a thing that I'm very excited about. Um. And yeah, I think we've kind of looked at that. Um. To try and see whether it's something that we could utilize in GSAP. Also, like web animations API is exciting as well.

• 24:59Wes Bos?

  Yeah.

• 24:59Speaker 01

  So yeah, there's, there's a lot of things that we're kind of quietly looking at on, on the side. Starting style is also, that's an exciting one.

• 25:07Wes Bos?

  Yeah. Yeah. I always think that that stuff would be like, probably the way that it would, would be integrated is that like the API wouldn't, wouldn't change that much. But if there was a, a, like a performance benefit or something that, that could be done under the hood. Maybe that type of thing could be, could be eked in. We talked to, um, was it Nate from Motion?

• 25:28Speaker 01

  Oh, Matt Perry.

• 25:30Wes Bos?

  Matt. Oh, Matt Perry.

• 25:31Speaker 01

  Yeah, I really, um, I like the hybrid approach that, that he's taken for, for motion.

• 25:38Wes Bos?

  Yeah, it's a exciting time when the, I'm sure that GSAP has, has influenced a lot of these, these APIs as well, you know? Where you look at him and go, that, that's kind of nice. I think I would like that in the browser. Natively as well, but sometimes you hit these like it does X, Y and Z. But I'm sure you've seen that a lot as well where it's like, it doesn't entirely cover every single little use case. Whereas like G sap is, like you said, the, the API is extremely robust and you can do literally anything you want with it.

• 26:11Speaker 01

  Yeah, I think that's the thing is I have in the past chosen to do things in CSS. And then the projects got more complicated and I've ended up having to refactor things. But you know, it's, it's all about choosing the right tool for the job at the end of the day, isn't it?

• 26:29Wes Bos?

  Totally.

• 26:29Scott Tolinski?

  Yeah. And I was looking at G sap. I, I saw a lot of people saying that like timelines were like a killer feature or something that the reason why they moved to G sap. Can you give me a little bit of like, what is a timeline? And why would that be considered a killer feature?

• 26:47Speaker 01

  So yeah, timelines are sequenced animations. So it's something that is a bit tricky in CSS. Like keyframe blocks don't have understanding of other keyframe blocks. So if you've got, you know, two animations and you want them to run one after another, you have to add a delay to another one. So G sap's got timelines. I think a lot of animation libraries have got timelines now, but G sap's timelines, we've got a position parameter. So you can basically position animations anywhere in relation to any other animations. Or you can put a label at a certain time and you can hang them off that label. And you can fire callbacks pretty much anywhere to run custom logic.

• 27:33Speaker 01

  You can nest timelines inside other timelines.

• 27:36Scott Tolinski?

  I like that.

• 27:37Speaker 01

  You can control timelines with control methods like play or pause or speed them up. Or play them in reverse at twice the speed. You can also, this is really fun. So because G sap is all just animating objects and timelines are objects. You can actually animate the time of a timeline. So it's pretty meta. But that means that you can kind of create an animation that does a whole bunch of things. And then you can just tween the progress of that.

• 28:12Scott Tolinski?

  Wow, that's amazing.

• 28:14Speaker 01

  I actually, there's a GSAP developer, Tom Miller, who's just written an article on Code Drops. And I, I think he might cover that. Making carousels where you can kind of click the next or previous button and it tweens a time scale of like an overall animation.

• 28:30Wes Bos?

  Oh, so you mean, you can, what you mean is like you can scrub an animation? Is that what you're trying to?

• 28:36Scott Tolinski?

  Yeah.

• 28:37Wes Bos?

  So like you have like a 10 second animation, but you could scrub it to five seconds if you want to go in the middle?

• 28:45Speaker 01

  Yeah, you can do that, but you can also just do that with like an animation. Or you could seek to a certain point in a timeline and then play it from that point. So yeah, just lots of control, basically.

• 28:57Scott Tolinski?

  Man, there's so many cool demos here. I'll link to this article here so that you can check this out.

• 29:03Speaker 01

  I'd love to see what you're looking at. I can see your face like getting really into things.

• 29:08Scott Tolinski?

  I'm just scrolling the, yeah, I know. That's actually been a lot of this episode for me is just going to these demos or the showcase and just being like, oh, I'm so interested in this. Okay, cool.

• 29:18Speaker 01

  I can't wait to see what you make, Scott.

• 29:21Scott Tolinski?

  Yeah, well, we'll see if it's any good.

• 29:24Wes Bos?

  And when you're, when you're timelining out like an animation, like let's say, for example, you, you wanted to like timeline out like a bike riding for a little bit. And then it jumping in the air and spinning around.

• 29:38Wes Bos?

  Is it a good idea to like, put each of those steps as like seconds? Or like, like, what do you normally use as like an increment for something if that value should be variable?

• 29:50Speaker 01

  So I think that's why the position parameter is good for like positioning bits of an animation. And one approach that I would do when I was doing really complex SVG animations was to create a timeline for each part of the animation.

• 30:12Speaker 01

  So if there were, you know, if it was a guy cycling, it might be like the wheels going as one part and like maybe the entrance animation is one part.

• 30:22Wes Bos?

  Yeah.

• 30:23Speaker 01

  Then I don't know if his tire explodes, that's another part. So you do separate bits and then you can kind of just sequence them one after another. Um, and position parameters, you can do absolute times um at seconds, like you're saying, or you can do kind of relative to other previous animations, which is usually a bit more flexible.

• 30:45Wes Bos?

  Oh, I see. So like when something, I assume you could also probably like react to something as well, like when this animation hits a specific thing, like when it hits running into a rock, then start the next animation.

• 30:59Speaker 01

  Yeah, yeah.

• 30:59Wes Bos?

  Ah, and what do you use to like visualize these? Is there any tooling around that?

• 31:05Speaker 01

  That's a really good question. Um, so I, I don't at the moment. It's just kind of all in my head. Um, and most people that, you know, are code people, once you start learning G sap, you can kind of go straight from your head into making the things. Cause you, you don't have to deal with UI, you know, same as writing code. You just think of the thing and then it happens. And we've got um some dev tools, so you can kind of uh hook up like a little um timeline scrubber to your timeline and you can play through it and pause and like loop sections and stuff like that. Um, they were a club G sap plugin and they're free now. So if you want to use that, that's free.

• 31:50Speaker 01

  Um, but also.

• 31:51Wes Bos?

  This is so enticing, all of the free stuff.

• 31:54Speaker 01

  The, the reason, the reason that we were acquired is to help them with the new iteration of their interactions. So.

• 32:03Speaker 01

  At some point, there will be a visual like builder for G-Star.

• 32:08Scott Tolinski?

  Yeah, that makes so much sense. You gotta love the the style of acquisition feels so much like the syntax one because, you know, we were given complete freedom and we're we're just there to, you know, to help out and we're still like, it's not acquired to get shut down. It's acquired to be enhanced or whatever. And you gotta love that. That's so cool. I love all this stuff. I'm looking, I'm just like playing around with the the scrubble and the plugin where you can just grab a timeline and scrub it. All of this reminds me so much of After Effects in a way where that's like a big part of my background is at After Effects. And I came from like really having a firm understanding of composable animations.

• 32:52Scott Tolinski?

  Like you said, you animate just the wheel and then you compose that you add it, you know. And so like this right now is speaking to me so much in that way of being able to to take animations, to take timelines, compose them, to add them to other ones, to build these complex things. And it really makes me understand why people like this so much. Yeah, it's really pretty cool.

• 33:14Speaker 01

  It's so much fun. I think like, as you were saying that, it made me think that the thing that really got me about animating on the web was it was familiar, like, like you say, like After Effects. But the thing that you have on the web that you don't have in After Effects is interactivity. So you've got that like interaction with your users rather than just giving them a video and being like, look, it's a pretty animation. Here you go. You can give them something that they can click with and play with and interact with. I actually, I made a little confetti cannon on the on the release page

• 33:55Speaker 01

  for the the old pricing page, which is now just the hooray, it's free page. Well, I definitely should have been doing documentation and other work, but I was like, I'm gonna make a confetti cannon. Important priorities. But, you know, just that sort of thing. It gives someone just a couple of seconds of their day that they'll stop and smile at something. And I just really love that.

• 34:21Scott Tolinski?

  It makes so much sense, too, that this comes out of the action script era of anything because. Anybody who comes from that era knows that the flash websites that we used back in the day were so much more, more animated, but like, they were more like interface animation design in a way that was like so missing from the web today. And I gotta love that this, this seems to fill that, some of that space. There's a lot of like plugins for this, of which formerly, many of them cost money or whatever. Is there any plugins specifically that are your favorites and anything that you are really like, oh, this is my, this is the plugin that I use the most?

• 35:04Speaker 01

  So I think, um, the, the one that I'll give a little shout out to is, is split text, mostly just because that's had a complete from the ground rewrite. Um, so that's like half the file size. Um, and also has built in accessibility by default, which is long overdue. Um, and masking and also handles splitting up really complicated text sequences. So like compound emojis and Devon Gary and Chinese characters and all of that sort of

• 35:42Speaker 01

  thing. My favorite one would be any of the physicsy plugins. So physics 2D is loads of fun. I think that's my favorite at the moment, just because I just made a confetti cannon and had loads of fun playing with like velocity and all of that sort of thing.

• 36:01Scott Tolinski?

  Oh, and split text. The reason you have that is because you often want to animate individual words and/or characters, right?

• 36:10Speaker 01

  Yep. Yeah. So quite a common animation challenge. Um, it can also be kind of overused in certain use cases. Um, but I do, I do really like a little kind of like button animation or a fun like hero intro.

• 36:29Wes Bos?

  Man, I wrote a little function called spar-ran wrap for one of my conference talks, where I wrapped every word and every character in a span. And it's a lot harder than you think, because like, like you said, like you can, you can split based on a space, but that's not always the case. And you can split based on nothing but like emojis that have zero with joiners, right? There's some APIs in the browser for that, but then also like word wrapping is a huge pain in the butt. If, and if you want to wrap spaces, it's a whole nother thing as well, because a span with a space in it is not necessarily the same thing as text with a space.

• 37:10Speaker 01

  You sound traumatized.

• 37:11Wes Bos?

  It's just a nightmare all the way down.

• 37:13Speaker 01

  Yeah.

• 37:13Wes Bos?

  Yes. Yeah. This should be easy.

• 37:16Speaker 01

  Did you run into responsive line issues as well? I don't know if you ran into that one.

• 37:24Wes Bos?

  I, I believe I did, because I was also trying to like use it with text wrap balance.

• 37:29Speaker 01

  Oh, yeah. But that's, that's brutal. That still doesn't work.

• 37:33Wes Bos?

  Yeah.

• 37:34Speaker 01

  Split text has not solved that one.

• 37:37Wes Bos?

  No.

• 37:38Speaker 01

  It's just very much don't, don't split your text and try and balance it at the same time.

• 37:43Wes Bos?

  What a wild world. But, once you do have like elements around every single letter or character, you can then do things like, like animate the text in, or like you could do it as you're scrolling in, you could bring the letters in, just really fun stuff you can do with it.

• 37:59Scott Tolinski?

  I'm looking at this physics 2D demos right now. So to just give the audience some, some perspective there, it basically just allows you very simple physics, no collision or anything like that. But like, the demo here that you have on this, the docs, is like, it is kind of like confetti. It's, it's like a cannon shooting out all these dots. This is the only time I've ever seen like a confetti demo that you can scrub in reverse and like play back and forth. Like that, I think that is such a killer feature for some of this. And like being able to like have that, that tool that you can physically press, press play and scrub along the timeline for, just to me like, it feels so like the developer experience is so well thought out.

• 38:44Scott Tolinski?

  And even the documentation, you said you spend a lot of time in the docs. Like what's the philosophy at GSAP about the documentation? Because it seems really, really robust and solid.

• 38:55Speaker 01

  Yeah, the the docs are great. I think we try and keep the docs like you're being talked to by like a friendly professor. So it's got to be very human and friendly and have examples and demos and ways to kind of just jump in and get started. It's a good, it's a good place to learn G sap. I think a lot of people do ask like, how do I get started? With learning G sap and I, you know, the docs are are wonderful. There's just so much information in there and so many little demos that you can like fork and play with.

• 39:31Scott Tolinski?

  Yeah, all of the demos have a fork button on them. So if you want to take any of these and actually experiment with it, you click the fork button. Every documentation should have that because it's not just like, here's some code you can copy and paste. But here's something you can actually try, which man, should be there in every docs for real.

• 39:49Speaker 01

  Yeah.

• 39:50Wes Bos?

  The, I'm just thinking about what Scott just said about being able to scrub through an animation. Um, and you know where that is actually extremely useful? Uh, be able to set a timeline at any given millisecond is in remotion. Um, so remotion is.

• 40:08Speaker 01

  Oh, I've seen.

• 40:10Wes Bos?

  Yeah, it's basically like react. You can make like videos with react. Yeah. And you can sort of do them out. But the way that it works is that they literally spin up. Uh, they need to take a, a screenshot of every single frame. Um, and then the way they can do it quickly is that they'll spin up like, like a hundred different, like, let's say you have uh, one second and and you want to split that into sixty frames. They could spin up sixty different processes. Each of those sixty processes scrubs to its own millisecond. And then takes a screenshot and then it comes back with those sixty frames and and puts it back into a video.

• 40:49Wes Bos?

  And part of the problem, I don't, I think CSS might be getting this, but part of the problem is that you can't tell CSS like, go to fifty percent of the way through a transition.

• 41:03Wes Bos?

  Which is, is, it can be an issue when you wanna have like fine grain control over where, where something is.

• 41:09Speaker 01

  Yeah, that, that's, um, I've seen Remotion before. It looks like a really cool tool. Um, there's, uh, I forget what it's called. Gsap video export. Um, friend of the library, he made a, um, yeah, like a video export for Gsap. So it's just, you, you run a command in the terminal and you give it like a URL and it will go to the page or the code pen. Um, and grab the timeline and then scrub through it and use MPEG to kind of chop it up into, um, images and then puts it all back together again.

• 41:43Scott Tolinski?

  I'm gonna use that for sure.

• 41:45Speaker 01

  It's so good. I, for all of my, uh, my Gsap videos that I do, um, I, I probably should use like a video. Um, animation software for it, but I just, I animate stuff with Gsap.

• 42:01Wes Bos?

  Your, your motion graphics are built with, with JavaScript? That's amazing.

• 42:06Scott Tolinski?

  Mine should be, but mine should be, I, I tell you what, uh, I, I tried to do so much dumb tech stuff with DaVinci Resolve and it's just like, it can't do anything. Oh my God. To, to do slicing of each and animating each individual character and the way that I could do with this, it would take me just a mammoth amount of effort in DaVinci. And sometimes I'm always like, why, why is it like this? Why, why can't they be about, maybe I'm just, should be using JavaScript instead.

• 42:34Wes Bos?

  Yeah.

• 42:35Scott Tolinski?

  Yeah.

• 42:36Speaker 01

  Um, so many streamers as well, like speaking of fun things that people use JavaScript for, like, the, the things on Twitch, like all the reaction emojis and the overlays and stuff like that. People use Gsap heavily in those things.

• 42:51Wes Bos?

  Oh.

• 42:52Speaker 01

  Cause it's all one tech, isn't it? You just got browser, like you, you make your overlays in the browser and then hook it up in.

• 42:59Wes Bos?

  Like OBS.

• 43:00Speaker 01

  That's the one. Thank you.

• 43:02Wes Bos?

  Yeah. CJ did a little video on, on how he did that as well. So he, he did one of these videos where he programmatically created all of the motion graphics. Um, and he, it was basically just like numbers one through 30 and they were, they were programmatically cut out and then they were kind of wiggling. And then he exported those to, to video as well. And I often think like, that's, that's such a good way. To do the stuff, type of stuff, especially when it is, it's on demand, right? Like with, with OBS, as soon as something, someone does something, you need to be able to play it and overlay. It's not something you can, you can make ahead of time.

• 43:38Speaker 01

  Yeah, there's a, there's a big broadcaster in the UK whose name I won't say because I'm not trying to get into trouble, but they, they use web technology and GSAP for all of their, like, what are they called? Custom thirds.

• 43:56Wes Bos?

  Yeah.

• 43:56Speaker 01

  They are, they go over the news and over sports programs and all of that sort of thing.

• 44:01Wes Bos?

  I bet that's more common than, than we actually think because

• 44:04Speaker 01

  Totally.

• 44:05Wes Bos?

  I know that a long time ago, I knew that the NFL way past Flash's time, but like maybe, maybe this is seven or eight years ago, but the NFL was still using Flash to programmatically make those like transitions, you know, they'll, they'll, they'll slide up the team icon and the, the score will get really big. And those were all generated in Flash at the time. I bet that some of the, those are now done. Like, why not? I bet. You just told us, you know? I don't bet it. I know it. You just told us. So.

• 44:38Speaker 01

  I, um, I went to the dentist ages ago to get my teeth straightened. And they had like a 3D thing of my teeth that were spinning around. And I was, I was just lying there with all the things in my mouth going like, what, what is this built with?

• 44:55Wes Bos?

  Yeah.

• 44:56Speaker 01

  What's, what's this? And had a whole chat with them, with the dentist about how it used to be Flash. And then they had to update all of their like 3D modeling software stuff.

• 45:09Wes Bos?

  Yeah.

• 45:09Speaker 01

  At some point because obviously Flash, Flash was no more. Um, he didn't know what it was actually using, but I was like, I wonder whether it's like 3JS and GSAP.

• 45:19Wes Bos?

  Yeah, I'm always curious about that as well because.

• 45:23Wes Bos?

  Like this new tech, I, the like JavaScript and web tech being used in unconventional non-website is, is very interesting to me. And I had the same thing. I have my, my tooth model that they 3D printed over on the shelf over there. And they show it, they bring it up on the piece of software or like the dentist will also do, you know, when they measure your gums and tell you you need to floss more, they now do that voice to text. It used to be like they had somebody sitting there entering the info and the other person would, but now it's all just like voice to text. And I, I often sit there while they're measuring my gums, being like, I could build this in like three hours.

• 46:08Speaker 01

  I'm glad that that wasn't a unique experience that I had.

• 46:11Wes Bos?

  Yeah.

• 46:14Speaker 01

  Like nerdy web tech moments at the dentist.

• 46:16Wes Bos?

  No, no, we, at one time at like, at a conference, Scott and I, 2am at a McDonald's, trying to figure out what the McDonald's, like self-ordering screens are built on. And apparently it's Silverlight, which is, which blew my mind.

• 46:32Scott Tolinski?

  Yeah, not something you've heard of in a long time.

• 46:34Wes Bos?

  Yeah.

• 46:35Scott Tolinski?

  Didn't Netflix use Silverlight at one point, like when?

• 46:37Wes Bos?

  Long time ago, yeah.

• 46:39Scott Tolinski?

  Yeah, long, long time ago.

• 46:41Speaker 01

  I'm out of the loop. I don't know what Silverlight is.

• 46:44Scott Tolinski?

  Oh, man, it was like a Microsoft, Microsoft owned it, right, Wes? I think it was a Microsoft's implement, like their version of Flash. And it was sort of like, right, it came out right at that era, like as the iPhone was killing Flash. And it was like, all right, now we got it. You had to download a Silverlight thing and install it. And it was just like, why would anybody pick this over, over Flash at this point, or soon to be?

• 47:09Wes Bos?

  DRM is why they did it.

• 47:11Scott Tolinski?

  Oh, yeah. No, totally.

• 47:13Speaker 01

  Those were the dark days, like post, just post Flash, before the other things came along.

• 47:19Scott Tolinski?

  Yeah.

• 47:20Speaker 01

  It feels like we're kind of in, like, post Flash, like, utopian era at the moment. There it feels like we've kind of got all the good things that we had back then, but with a little bit more knowledge about like, performance and accessibility and how to fool people that are using your website and stuff.

• 47:39Scott Tolinski?

  Yeah, now, now, now, let's bring back the, uh, the flash aesthetic, then. Let's bring back

• 47:43Wes Bos?

  Yeah.

• 47:44Scott Tolinski?

  The flash interactivity.

• 47:45Speaker 01

  For everyone.

• 47:46Scott Tolinski?

  Yeah.

• 47:47Wes Bos?

  Yes, we need more, not screw whimsy, we need just like full immersive like video game intro.

• 47:54Scott Tolinski?

  Yeah.

• 47:54Wes Bos?

  To websites. Um, so I have a question about that, not about video games, but about the web in general. Is there, is there anything missing that you are, would absolutely love to have in, in web tech, whether it's CSS, SVG, JavaScript?

• 48:10Speaker 01

  Oh, that's a really good question. Um, I would, I would really love for, uh, for my brain to comprehend shaders better.

• 48:20Scott Tolinski?

  Oh, me too. Holy cow, yeah.

• 48:22Speaker 01

  That's not something that they need to like add to the platform, but I mean, I've been so excited about shaders for a while now and I keep trying and trying, but it's just, it's so low level.

• 48:33Scott Tolinski?

  It's crazy.

• 48:34Speaker 01

  Shaders for stupid people is that?

• 48:37Scott Tolinski?

  I was working on a shaders course. Yeah, I was working on a shaders course and I am too stupid for it. It was like, it is crazy that like you have to think about every pixel all at once. And like, that is such a weird transformation in thinking that like, I, I was building some very basic stuff and then you'd get into like slightly more advanced things and I'm just look at it and be like, why does this work? Like, I don't understand how this works or why this works.

• 49:04Speaker 01

  Yeah. Have you, have you gone on shader toy and like given yourself the doom?

• 49:09Scott Tolinski?

  Oh, yeah. Oh, yeah.

• 49:11Speaker 01

  You scroll through there and you see some of these things that people have built with shaders that are just full on real life, uh, replications of a river.

• 49:20Wes Bos?

  Yeah. And then they, they show you like it's 200 lines of JavaScript. Like, how did you do that?

• 49:26Speaker 01

  Magic.

• 49:27Wes Bos?

  Yeah.

• 49:28Speaker 01

  Magic. I, I did a, I did a little shader, um, like online course workshop thing. Uh, my partner is very, very clever and does, um, audio programming and C++ and, but our dynamic is he's the music one and I'm the visual one and that's where we're comfortable. But he came and sat next to me and was just making shaders because apparently his brain can comprehend that. They looked horrible. It, it looked like psychedelic vomit, but he was still managing it better than me.

• 50:00Scott Tolinski?

  Yeah. That's so funny.

• 50:02Wes Bos?

  I I actually was was writing one, I don't know, maybe six months ago, because I'm I'm very into that whole um. What's that aesthetic where it's kind of like noisy uh?

• 50:15Scott Tolinski?

  Glitchy?

• 50:15Wes Bos?

  Drop shadows.

• 50:16Scott Tolinski?

  Oh.

• 50:16Speaker 01

  Oh, yeah.

• 50:17Wes Bos?

  No, noisy drop shadows, you know? And the I I replicated it was with I found some WebGL code that was that had a custom shader and it replicated that. And then I could use like a blend mode on my elements to sort of make it look like that. And I was just trying to like change the values to make it a little bit more grungy. But I found that like AI is very good at explaining how these things work. And it made it a little bit more approachable for an idiot like me.

• 50:48Speaker 01

  Yeah, that is a good thing. The AI.

• 50:52Wes Bos?

  What about AI and GSAP? Is is there any is AI good at writing any GSAP stuff?

• 51:00Speaker 01

  It's it's AI. Um, it it does. It does some things very confidently incorrectly. Um, it also does some some things really well. I think it's it's been really interesting watching a new cohort of developers kind of using it as a way to learn and like an entry point into learning. Um, and I've I've seen some really positive things, like some people kind of getting to grips with stuff quicker because of AI. I've also seen people drop into our forums after they've been battling a challenge with AI for days. And they've got dreams of code that doesn't make any sense. And that just makes me want to cry because I'm like, if you just dropped into the forums

• 51:45Speaker 01

  like two days ago, we would have helped you with this. It would have taken 10 minutes.

• 51:50Wes Bos?

  Oh, yeah.

• 51:50Speaker 01

  You just, yeah, so I think.

• 51:52Wes Bos?

  They just show up with a box of garbage code. What what do I do? And it's like, I don't know, like, that's awful. I should no one should have written that. No one did.

• 52:02Speaker 01

  And you spend, I'll spend a while looking at the code, trying to work out what this person was trying to do. And then you realize that it's, it is just nonsense that AI has hallucinated.

• 52:13Scott Tolinski?

  Yeah, right.

• 52:14Speaker 01

  Kind of go back to what the original problem was.

• 52:17Scott Tolinski?

  Wow, this has been super amazing. You know, I, I went from being kind of clueless about GSAP. Uh, to feeling like this is all I want to use for animating right now, especially like it just, it speaks to me. So thank you so much, Cassie. I think this was really super illuminating. Oh, it's, we've been trying to get you on for a long time, so it, it feels long overdue and, um, really appreciate you taking the, the time. Now's the part of the show where we get into sick picks and shameless plugs. Sick pick, something that you're just enjoying right now? Shameless plug, something you want to plug? Do you, do you have a sick pick and a shameless plug?

• 52:51Speaker 01

  I do. So my, my sick pick, um, would be a little, I don't have it. I tried to find it and I had lost it somewhere in the house. But it's a, a little orange box that, um, allows you to do video synthesis. Um, and it's called an IZI from Critter and Gitarri.

• 53:14Scott Tolinski?

  What is video synthesis?

• 53:16Speaker 01

  So, uh, this is kind of what I do in my spare time. Um, so my, my partner does, uh, audio programming. Um, and we've got a big projector in our lounge and, uh, he makes little noises on his synthesizer. And then I can pipe the noises through my video synthesis, um, machine. So it accepts MIDI in and then you've got little buttons and stuff and you can press the buttons and twiddle the knobs. And you get weird colors and patterns and things. And, um, you can also program presets for it. So, uh, you can program in Python or open frameworks.

• 53:57Speaker 01

  And yeah, it just makes, I guess fancy versions of old Windows.

• 54:02Scott Tolinski?

  Yeah.

• 54:04Wes Bos?

  Oh, like a screensaver.

• 54:06Scott Tolinski?

  And it works with MIDI, so you can connect to Ableton, like you said, man.

• 54:10Wes Bos?

  Oh, man.

• 54:11Scott Tolinski?

  This is cool. Did you ever get into Max MSP and Jitter?

• 54:15Speaker 01

  Yeah.

• 54:15Scott Tolinski?

  I feel like that's something you'd love.

• 54:16Speaker 01

  I've been using Jitter recently, yeah.

• 54:18Scott Tolinski?

  Yeah.

• 54:19Speaker 01

  Um, I didn't get super into Max MSP, the whole like mod, nodules, node thing.

• 54:25Scott Tolinski?

  That's how I learned how to program. Yeah, it's through Max MSP. That was my first programming language.

• 54:30Speaker 01

  Yeah.

• 54:31Scott Tolinski?

  This reminds me so much of that in a way. So cool.

• 54:34Wes Bos?

  Oh, man, this is like Winamp audio visualizer vibes as well.

• 54:39Speaker 01

  So much fun.

• 54:40Wes Bos?

  Have you ever like, like DJed a, a conference or anything?

• 54:44Speaker 01

  I've been, I've been pondering it. I think I drunkenly said to, um, Mark from Beyond Telluraine that I should do some visuals for him at a conference. If you're listening, Mark.

• 54:57Scott Tolinski?

  Ah, yes, do this. Oh, my God. I love this. Cool. Hell, yeah. And shameless plugs. What would you like to plug?

• 55:04Speaker 01

  Shameless plugs. I mean, I guess the, the main shameless plug is like Gsap is all free. All of it is free. Go and play with the things. Make ridiculous stuff. And yeah, I guess another thing that I could plug is that, um, we're running a community challenge for the next month with Webflow. So, um, we're gonna have a prompt each week to make something fun using Gsap. Um, you can either use Webflow and Gsap or CodePen and Gsap. Um, and then we're giving away merch and stuff. So if you listen to this and you're like, I want to have a play around with these things, then play around with the things and then maybe win some merch.

• 55:48Scott Tolinski?

  Amazing, cool.

• 55:49Wes Bos?

  Is there any, uh, any of the OG superhero with the green sock merch kicking around? That stuff's gonna be worth.

• 55:56Speaker 01

  I've, I've got some, I've got some in my wardrobe, but yeah. We should, we should bring him back out of, um, out of retirement for a little bit. Um, I'm doing a workshop in September at Smashing Comp in Freiburg as well. So if you wanna hang out in person and like move something, some things around, then yeah, come along.

• 56:18Wes Bos?

  Oh, man. Smashing Comp is excellent. One of the best like web dev conferences ever. So I, again, I'll, I'll vouch for that. If you are in Europe or you wanna travel to Europe, certainly check that out.

• 56:32Scott Tolinski?

  Uh, what's your dog's name again?

• 56:33Speaker 01

  This is Brody.

• 56:35Scott Tolinski?

  Yes, Brody. Okay. Brody's a frequent character in your videos and I'm so happy that Brody is making appearance in this episode. It is Brody's dinner time.

• 56:43Speaker 01

  Give me my dinner.

• 56:44Scott Tolinski?

  Yes, we will let you get, uh, to feeding, uh, Brody. I'm sure he's very, very hungry. So thank you so much, Cassie. This has been unreal. Uh, you're amazing. Happy to chat with you and, uh, hope to have you on again someday. Yeah.

• 56:57Speaker 01

  Cool. Bye, folks.

• 56:59Wes Bos?

  Peace.