GSAP: Killer Web Animations With Cassie Evans

Welcome to Syntax. Today, we have a really good one. We're gonna be talking with Cassie Evans, who is a developer education over at GSAP. So that means we're gonna 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? Hey. Yeah. I'm really good. I'm very excited to to be on Syntax. 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 I it's been a large gap for me in my knowledge Bos. 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 and in general, I I think it's really cool. So, yeah, very, very excited. Wes, how are you doing today? I'm good.

I think maybe we should go real quick into, like, what is GSAP for maybe anyone who who hasn't used GSAP before or or maybe might not know what it is. So, you wanna give a stab at what that is, and then we'll we'll go into the announcements in shortly after that. 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, three d things, pretty much anything that JavaScript can touch. And it's been around for, woo, like fifteen years now. Wow. Yeah.

For the for the, the people that have been around since the Flash days, they'll remember, GSAPP as an action script library.

So it's kind of been, like, at the forefront of web animation for a really long time now. Man. And GSAPP just had, like, a a major kind of rebranding as as well, which was,

I think, great. Because for the longest time, it was like a like, superhero man, and it was extremely popular. But I think I think a lot of people kinda wrote it off as, like, that kinda whole vibe, lost it, and the whole the new design looks amazing. Were you part of that? Yeah. That was,

that was on my hit list as soon as I started working at GSAT.

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,000,000 websites, it's a good thing. It's a really good thing. But I think, yeah, the 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?

So so JS GSAP, because I remember this as Greensock. Is Greensock and GSAPP the same thing? Just a rebranded kind of way of referring to it?

So, yeah, Greensock is the company Node. Gotcha. And GSAPP is the library.

So, GSAP stands for Greensock Animation Platform.

But we kind of found that people were using GSAP and Greensock interchangeably.

Sanity was just kind of easier to just lean into the GSAP

side. That makes so much sense. You know, I always thought the animation library was was GreenSocks. And and I hate to say this, but its name turned me off from, like, using it. Just like GreenSocks? I don't Node. Think about GreenSocks.

GSAPP, 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 it seems CSS 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.

Yeah. I mean, I understand that. I actually before I learned GSAP, 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 sights.

And then I kind of hit up against some walls and realized that GSEP had a bit more power to it.

But, yeah, visuals, first impressions, they're important.

Yeah. Totally. Yeah.

Your own website, personally, is that using using GSAPP as well? Because it's it's one of those websites that has, like, whimsy on it. This is, yeah. I I feel like my website is due for an overhaul. I'm too busy helping everyone else make Oh, man. That looks awesome.

It's very, Cassie's circle of a few years ago, I think.

But, yeah, using GSAP everywhere on there. Oh, that's good.

So is GSAP, basically, it's it's JavaScript library for doing animations and scrolling things in and 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 it's using GSAP. Are those animations using what? Or is it using CSS? Is it using the Wes animations library? What's going on under the hood?

It's just JavaScript.

So sets like ESLint transforms on dumb elements.

But it's kind of animating objects. So, yeah, if you're using it for, you know, objects in Three. Js or something, it's just kind of directly manipulating the properties. Let's get into the the actual announcement because you've got, like, a little sneaky thing to tell us. Yeah. So it's, super exciting.

We've just announced that we're making GSAPP 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 Mhmm. The reason that GSAP has managed to stick around for as long as it has, is because we had some club plug ins, like some little bonus extra animation goodies that we put behind a membership, TypeScript. 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

Amazing. Very exciting. And and that's because

GSAP was was bought by Webflow. Right? 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 That's awesome. Yeah. Really nice. It's wild to me that like, you don't necessarily have to talk about Webflow. I don't wanna 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 we did this little, video a couple.

Wes was that, Scott? Maybe a couple months ago where we're trying to guess I watched that one. The the tech stack behind it. You're like, is this Squarespace, or is this Webflow? And it's kinda funny how you can just, like, almost smell what a website has been coded on based on, like, the the interaction behind it. I, I had a really similar thing where,

so I do a lot of things at GSAPP. One of the little side projects that I have is, I kind of post my favorite sites and add them to the GSAPP showcase.

And when people submit a 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, Astro, Svelte, whatever, Eleventy, and then all of a sudden, just loads of Webflow sites. And there was a little bit of me that JS a developer, I was like, Node. That's a that's a website builder. Like, sure surely not.

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 Yeah. Like, really talented creative developers who write GSAP animations and code were being brought on to kind of add a bit of polish.

Mhmm. Speaking of this showcase, if you we'll have a link to the showcase in the show notes.

But, man, if you wanna get a good idea for, like, what GSAPP is capable of, this showcase is just a phenomenal place to do that. I'm just, like, watching these things and just feeling ESLint like just inspired because there's so many crazy animated designs on here that looks so good. Man, what is it about GSAT users that allow them to build this kind of stuff? Holy cow. Yeah. It's I mean, it's a really fun

library.

Like, I actually learned how to code through GSAP.

Mhmm. Yeah. When I was first learning JavaScript, I I, I didn't really connect with a lot of tutorials online. I'm sure you've had a similar kind of experience where it was like, you know, FizzBuzz 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. Yeah. I I I love that stuff as well. Like, if you want to be if you wanna 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 FizzBuzz or or Fubar 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 FUUBAR Bos JS. But for for a lot of other people, they wanna they wanna have delightful stuff. They wanna be able to make something that's exciting. They wanna 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.

Yeah. You you've both done, like, a really great job of that in the past as well of teaching people with, like, building fun things.

I think that's, like, that's what GSAPP is for me is is so many people, they start learning GSAPP, 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 it does feel like it's being 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. And if you want to see all of the errors in your application,

you'll want to check out Sentry at sentry.i0/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 century.i0/syntax.

Again, we've been using this tool for a long time, and it totally rules. Alright.

So what is it about GSAPP 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 GSAPP special, I guess? What is the the secret sauce?

So yeah. I think I wouldn't say GSAPP 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 GSAPP 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. 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. Just been around for so long. Yeah. Pretty much. And one

like, areas, 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, like, 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?

Yeah. Yeah. Definitely. So, I mean, that's the most exciting bit for me, about the GSAPP being free announcement is the fact that all of the SVG plugins, the previously paid ones Yarn 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. That's Yeah. What what is it about SVG that some people just just get really deep into it? Because it's not it's not an easy thing Totally. 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? Why do you like that? 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 GSAT together that I was like, oh, it's just vectors in the browser and paths and, oh, I can animate them.

I was used to design programs and animation programs. So it was just that, but on the web, which was fun. 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, what whatever I could 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. Yeah. 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.

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

So there's still, you can get yourself into tricky spots when you're animating, whether you're using GSAP or Node 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 hardware accelerated animations.

GSAP is very performant under the hood though, as well. But yeah, you can still get yourself into problem spaces if you're like, I'm going to animate filters all over my website, and I'm gonna animate Bos shadows everywhere.

We're gonna need new elements show up, animate on, and oh, yeah. 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, that can cause a frame rate to drop? Yeah. So I think

the top ones would be animating the wrong properties. And by wrong properties, my top wrong properties would be filters and box shadows. Filters are horrendous for animation.

I think you sometimes see people doing tricks with box shadows where rather than animating the properties of the box shadow itself, they kind of animate the opacity of a box shadow and a pseudo element and stuff like that. So, yeah, it's good to animate where you can transforms and opacity. Those are the safe, zippy ones.

And then also, like, think about what's happening with your animations when they're off screen. Make sure that you're kind of killing things, reverting things, pausing things, that sort of sort of thing. Yeah. 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, after pseudo selector and animated the opacity, and all of those issues went away. So definitely important to know know those things if, it can get you into some odd trouble sometimes for sure.

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.

Oh, interesting. And GSAP works with with Canvas as well then? So there's there's things you can render to it. Is that how 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 wanna build something, do you decide, should this be DOM elements, SVG, or Canvas?

Yeah. When you're when you're building something. So GSEP 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.

So what you put on the screen is up to you whether you're, like, rendering a Three JS object or whether you're using an SVG or DOM elements.

Oh, Wes. It's just doing doing the math of figuring out how often, how frequent, how much, it should should move it around. Yeah. Just kind of wiggling the numbers around behind the scenes. Yeah. And 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 GSAPP that you just love pointing to?

Oh, that's a really good question.

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

That's always the thing,

are we allowed to do that? You can do that. Pleap them.

Yes. But, yeah, there's, I really like it when people make games with with GSAPP. That's always really fun.

There's also, I've seen GSAPP being used in hardware as well. So, I think there was, like, a Yarn vehicle UI that had GSAP under the hood. Oh, yeah. Yeah. Quite interesting.

I love looking through the car's software 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. Wes it 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 offers. I was like, okay. Well, 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 animation. Yeah. So you you can use GSAP anywhere,

but, React JS, historically a little bit trickier.

People were struggling a little bit. So we came out with a hook, the 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 lot of React people are used to declarative and just kind of popping stuff on your JSX, 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 Yeah. Do do the fun things.

So it's it's there if people want it.

I I I just was looking on the website, and sure enough,

there's a video of you talking. Use GSAB Hook. So Yeah. I I I hate that my face JS in all the thumbnails.

I got suckered in to having to put my face on the thumbnails for for the algorithm.

For the algorithm. I know. We when when we started worrying more about the YouTube algorithm, it's like, alright. We have to do this. We have to do that. And it's like, oh, he you've resisted for so long, but he really does make it happen. Jump scare every time I look through the docs. And I spend half of my life in the docs tweaking things and then just my face.

That's our our 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, you know? Yeah. I was not expecting that. You know?

Internet famous.

Yeah. Yeah.

Have you been keeping up with with all that's been going on with with CSS in the last, I don't know, year, year and a half, or or everything that's been going on there? Has anyone managed to keep up with all that's been happening with CSS. Have you been trying? Like, right before this trying.

Yeah. Right before this, we recorded an episode that Wes, 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 or this exists, like Zoom. Yeah. Yeah. It's crazy. 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 Yeah. But you can't use it yet. Yeah. Totally. And then you'd have to wait for a few years. Whereas what's happened now is is just with Interop, everything is just hitting so much faster.

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

I think animation wise, scroll timeline's very exciting.

Yes. So, I mean, I'm a I'm a I'm a GSAPP 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, performance and, like, browser standards and that kind of thing. So, for the event sites, we could kinda go crazy and use DSAP and make, like, silly nonsense. But there were a lot of, design systems that we were building out where we weren't using external libraries.

We're 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.

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

things like that where transitions is is a thing that I'm very excited about.

And, yeah, I think we've looked at that, to try and see whether it's something that we could utilise in GSAP.

Also, Wes animations API is exciting as well. Yeah. So yeah, there's a lot of things that we're kinda quietly looking at on on the side. Starting style is also that's an exciting one. Yeah. Yeah. I always think that that stuff would be

like, probably the way that it would would be integrated is the, like, the API wouldn't wouldn't change that much. But if there was 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.

Wes talked to, was it Nate from Motion?

Oh, Matt Perry. Matt. Oh, Matt Perry. Why did I say this, Nate? I really, I like the hybrid approach

that that he's taken Yeah. For for Motion. 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 them like, oh, that that's kinda 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, GSAP JS, like you said, the the API is extremely robust, and you can do literally anything you want with it. Yeah. Yeah. I think that's the thing JS,

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. Mhmm. 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? Totally.

Yeah. And I Wes looking at GSAP. 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 GSAP. Can you give me a little bit of a, like, what is a timeline, and why would that be considered a killer feature?

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 Node animations and you want them to run one after another, you have to add a delay to another one.

So GSAP's got timelines.

I think a lot of animation libraries have got timelines Node, but GSAPP'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.

You can nest timelines inside other timelines.

I like that. Yes. 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 GSAPP is all just animating objects and timelines are objects, you can actually animate the time of a timeline.

Oh, yeah. Wow. 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. Wow, that's amazing.

I actually, there's a GSAPP developer, Tom Miller, who's just written an article on Node Drops, and 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.

Oh, yes. Mean you what you mean is, like, you can scrub an animation. Is that what you're trying to Yeah.

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

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.

Oh, there's so many cool demos here. I thought I'll link to this article here so that, you can check this out. It it just to see what you're looking at.

I get to see your face, like, getting really into things. I'm just calling me yeah. I know. That's actually been a lot of this episode for me. It's just going to these demos or the showcase and just being like, oh, I'm so interested in this. Okay. Cool.

I can't wait to see what you, make, Scott. Yeah. Well, we'll see if it's any good.

And when you're when you're time lining 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.

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

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

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

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.

And position parameters, you can do absolute times, at seconds, like you were saying, or you can do kind of relative to other previous animations,

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

Yeah. Yeah. Yeah.

What do you use to, like, visualize these? Is is there any tooling around that?

That's a really good question.

So I I don't at the moment. It's just kind of all in my head.

And most people that, you know, are code people.

Once you start learning GSAP, you can kind of go straight from your head into making the things. Because 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.

Yeah. We've got, some dev tools.

So you can kind of, hook up like a little, timeline scrubber to your timeline, and you can play through it and pause and, like, loop sections and stuff like that.

They were a Club GSAP plug in and they're free Node. So if you want to use that, that's free.

It's so enticing, all of the free stuff. Yeah.

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

So at some point, there will be a visual light builder for GCSE.

That makes so much sense. You Scott love 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, you it's not acquired to get shut down. It's, acquired to be enhanced or or whatever, and you gotta love that.

That's so cool. I I love all this stuff. I'm looking I'm just, like, playing around with the, the scrubbable in the the plug in where you can just grab a 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 in After Effects. And I came from, like, really having a a firm understanding of composable animations.

You like you said, you animate just the wheel, and then you compose that, you add it, you you Node. 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. 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.

Yeah. 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 for, the the old pricing page, which is now just the hooray, it's free page. Yeah. Yeah. Wes I I definitely should have been doing documentation and other work, but I was like, I'm gonna make a confetti cannon.

Important priorities.

But do 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 I just really love that. 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 they were more ESLint 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 plug ins specifically that are your favorites or anything that you are really like, oh, this is my this is the plug in that I use the most?

So I think, the the one that I'll give a little shout out to JS, is split text, mostly just because that's how to complete from the ground rewrite.

So that's like half the file size, and also has built in accessibility by default, which is long overdue, and masking and also handles splitting up really complicated text sequences.

So, like, compound emojis and, Devangari and, Chinese characters and all of that sort of thing.

My favorite one would be, any of the physics plugins. So physics two d 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.

Oh, and split text, the reason you have that is because you often wanna animate individual words and or characters. Right?

Yep. Yeah.

So Oh, man. Quite a common animation challenge.

It can also be kind of overused in certain use cases.

Yeah. But I do I do really like a little kind of, like, button animation or a fun, like, hero intro.

Same. Man, I wrote a little function called spar spar sparan wrap for one of my conference talks Wes I I wrapped every word and every character in a span.

And it's 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 another thing as well because a span with a space in it is not necessarily the same thing as text with a space. It's just a nightmare all the way down. Yeah. Yes. Yeah. It's stacked.

This should be easy.

And, I I did you run into responsive, line issues as well? I don't know if you run into that one. I I believe I did,

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

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

Yeah. Split text has not solved that one. No. It's just very much don't don't split your text and try and balance it at the same time. Wild world.

But once you do have, like, elements around every single letter or character, you can then do things like like Sanity the text in or, like, you could do it JS you're scrolling in. You could bring the letters in. There's really fun stuff you can do with it. I'm looking at this, physics two d

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 play and scrub along the timeline for. This to me, like, it feels so, like, the developer experience is so well thought out. And even the documentation, you said that 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.

Yeah. The the docs are great. I think we try and keep the docs like you're being talked to by 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 GSAP. I think a lot of people do ask, like, how do I get started

with learning GSAP? And I, you know, the docs are wonderful. There's just so much information in there and so many little demos that you can, like, fork and play with. 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. Yeah. The I'm just thinking about what Scott just said about being able to scrub through an animation.

Yeah. And you know where that is actually extremely useful? Be able to set a timeline at any given millisecond is in Remotion.

So Remotion is

Oh, I've seen this.

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.

They need to take a a a screenshot of every single frame.

Yeah. 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, one second and and you wanna split that into 60 frames. They could spin up 60 different processes.

Each of those 60 process scrubs to its own millisecond and then takes a screenshot, and then it comes back with those 60 frames and and puts it back into a video.

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 50% of the way through a transition, which is is it can be an issue when you wanna have, like, fine grain control over where where something is. Yeah. That that's, I've seen Remotion before. It looks like a really cool tool.

There's, I forget what it's called. GSAP Video Export.

Friend of the library, he made a, 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 Node pen, and grab the timeline and then scrub through it and use that, MPEG to kind of chop it up into, images and then puts it all back together again.

So I'm a use that for sure. It's so good. I for all of my, my GSAPP videos that I do, I I probably should use, like, a video, animation software for it, but I just I animate stuff with JSAP, and then I'll just make sure

graphics are built with with JavaScript? That's amazing.

Mine should be. But mine should be. I I tell you what. I I tried to do so much dumb tech stuff with DaVinci Resolve, and it's just like, it can't do any 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. JavaScript. Yeah. Yeah.

So many streamers as Wes. 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 GSAT heavily in those things.

Because it's all web tech, isn't it? You just got a browser. Like, you you make your overlays in the browser and then hook it up in Like OBS.

That's the one. Thank you.

Yeah.

Yeah. Wes 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.

And he it was basically just, like, numbers one through 30, and they were they were programmatically cut out, and then they were kinda 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 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. Yeah. There's a there's a big broadcaster

in The UK whose name I won't say because they're Node trying to get into trouble. But they they use, web technology, and GSAP for all of their, like, what are they called? Custom thirds.

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

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

I know that a long time ago, I knew that the Npm, way past Flash's time, but, like, maybe maybe this Wes seven or eight years ago, but the NFL was still using Flash to programmatically make those, like, transitions. You Node, they'll they'll they'll slide up the team icon, and they'll 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 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 I,

I went to the dentist ages ago to get my teeth straightened.

And, they had like a three d thing of my teeth that were spinning around. And, I was I was just lying there with little things in my mouth going like, what, what is this built with?

What's this?

And had a whole chat with, with the dentist about how it used to be Flash.

And then they had to update all of their, like, three d modeling software stuff Yeah. At some point because, obviously, Flash Flash was no more.

He didn't know what it was actually using, but I was like, I wonder whether it's, like, three JS and GSEP.

Yeah. I'm always curious about that as well because, like, this new tech I I the, like, JavaScript and web tech being used in unconventional non website is is very interesting to me. And I I had the same thing. I have my my tooth model that they three d 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 I often sit there while they're measuring my gums being like, I could build this in, like, three hours.

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

We've we've both

had, like, nerdy Wes tech moments at the dentist. No. No. We I've at one time at, like, at a conference, gone at 2AM at a McDonald's trying to figure out what the McDonald's,

like, self ordering screens are built on. And, apparently, it's silver light, which is which blew my mind. Yeah. Scott something you've heard of in a long time. Yeah. Did Netflix use silver Silverlight at one ESLint, like, when it first time ago. Oh, god. Yeah.

Long, long time ago. I'm out of the loop. I don't know what Silverlight is. 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, alright. 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 HTML five? Is why they did it. Totally. Oh, yeah. No. Totally. Those were the dark days,

like, post just post Flash before the other things came along. Yeah. I know. I remember that. It's like kind of in post Flash utopian era at the moment though. It feels like we've 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 keep people that are using your website.

Yeah. Now now let's bring back the, the Flash aesthetic then. Let's bring back the Yeah. Flash interactivity.

For everyone.

Yeah. Yes. Exact we need more not screw whimsy. We need just, like, full immersive, like, video game intro Yeah. Yeah. To websites.

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?

Oh, that's a really good question.

I would I would really love for, for my brain to comprehend shaders better. Oh, me too. Holy cow. Yeah. That's kind of 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.

It's crazy. Shaders for stupid people? Is that Yeah. Can they add that? 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 and thinking that, like I I was building some very basic stuff, and then you get into, like, slightly more advanced things. And I would just look at it and be like, why does this work? Like, I don't understand how this works or why this works. Yeah. Have you have you gone on a shader toy and,

like, given yourself doom? Oh, yeah. Oh, yeah. You you Scott through there, and you see some of these things that people have built with shaders that are just full on real life, replications of a river

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

Yeah. Magic. I I did a little world.

I did a little shader, like, online course workshop thing.

My partner is very, very clever and does, audio programming and C plus plus 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 Yeah. He was still managing it better than me. Yeah.

That's so funny. I I actually was was writing one, I don't know, maybe six months ago because I'm I'm very into that whole, what's that aesthetic where it's kind of, like, noisy, drop shadows. Oh. Node. Yeah. Noisy drop shadows. You know? And the way 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 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. Yeah. That is a good thing.

The AI AI good. What about,

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

It's it's AI.

It it does it does some things very confidently incorrectly.

Yeah. 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.

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, like, two days ago, we would have helped you with this. It would have taken ten minutes.

Oh, yeah. And you just yeah. So I think there's show up with a box of

garbage Node.

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.

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.

Yeah. Right. Kind of go back to what the original problem was. Wow. Oh, that's great. Been super amazing. You know, I I went from being kind of clueless about GSAPP, to feeling like this is all I wanna use for animating right Node, especially, like, it just it speaks to me. So thank you so much, Cassie. I think this was really super to have you on. Oh, it's we've been trying to get you on for a long time, so it it feels long overdue and, really appreciate you taking the the time.

Now is the part of the show where we get into sick picks and shameless plugs.

Sick pnpm, something that you're just enjoying right Node, shameless plug, something you wanna plug. Do you do you have a sick pick and a shameless plug?

I do. So my sick pick, 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 little orange box that allows you to do video synthesis.

It's called an Eyezy from Critter and Katari.

What is video synthesis?

So, this is kinda what I do in my spare time. Yes. So my my partner does, audio programming, and we've got a big projector in our lounge.

And, he makes little noises on his synthesizer. And then Hell yeah. I can pipe the noises through my video synthesis, machine.

So it 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, you can also program presets for it. So, you can program in Python or openFrameworks.

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

Like Yeah. Yeah. Oh, like a screensaver.

Yeah. And it works with MIDI, so you can connect to Ableton, like you said. Man Oh. This is cool. Did you ever get into MaxMSP and, jitter?

Yeah. I feel like that's something you love. Using jitter recently.

Yeah. Yeah.

I didn't get super into Max MSP, the whole, like, nodules,

Node thing. Node not quite how to program. Yeah. It's through MaxMSP. That was my first programming language.

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

Oh, man. This is like Winamp audio visualizer vibes as well. So cool. Have you ever, like, like, DJ'd a a conference or anything?

I've been I've been pondering it. I think I drunkenly said to Yes.

Mark from Beyond Telloran that I should do some visuals for him at a conference.

If you're listening, Mark.

Nah. Yes. Do this. Oh my god.

I love this. Cool. Hell, yeah. And shameless plugs, what would you like to plug?

Shameless plugs. I mean, I guess the the main shameless plug is, like, GSAPP 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, we're running a community challenge for the next month with Webflow.

So, we're gonna have a prompt each week to make something fun using GSAP.

You can either use Webflow and GSAP or CodePen and GSAP.

And then we're giving away merch and stuff. So if you listen to this and you're like, I wanna have a play around with these things, then play around with the things and then maybe win some merch.

Amazing. Oh. Cool. Is there any, any of the OG

superhero with the green sock merch kicking around that stuff's gonna be worth? I've I've got some I've got some in my wardrobe, but, yeah, not we should we should bring him back out of, out of retirement for a little bit. Yes. Alright. 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 some things some things around, then, yeah, come along. Oh, man.

Smashing Scott 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.

What's your dog's name again? This is Brody.

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 tonight. Give me my dinner. Yes. We will let you get, to feeding, Brody. I'm sure he's very, very hungry. So thank you so much, Cassie. This has been unreal.

You're awesome. You're amazing. Happy to chat with you, and, hope to have you on the weekend someday. Yeah.

Cool. Cool. Bye, folks. Peace.