GSAP: Killer Web Animations With Cassie Evans

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,

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 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, I I I just was looking on the website, and sure enough,

so anywhere in relation to any other animations, a lot of transforms and opacity, audio programming, Node trying to get into trouble. But they they use,

that's really important.

that, like, look the best or have, like, the best interaction are often on Webflow. We we did this little, video a couple.

GSAP.

I do a lot of things at GSAPP. One of the little side projects that I have is, I kind of post

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,

I ask what tech stack they're using.

of FizzBuzz or or Fubar Baz from all of my tutorials because it's just

Mhmm. Speaking of this showcase,

And

inspired because there's so many crazy

And then, yeah, I discovered GSAP and, like, building 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.

Mhmm. Yeah. When I was first learning JavaScript,

were being brought on to kind of add a bit of polish.

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.

they had more space in the budget Friend of the library, he made a, There's,

really exciting to you. Right?

And I'm I'm the same way as well to a point where I ban the use of

Like, I actually learned

if you we'll have a link to the showcase

for the extras. So Yeah. Like, really talented creative developers who write GSAP animations and code

But, man, if you wanna get a good idea for, like, what GSAPP is capable of, this showcase is

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

And when people submit a showcase, would be a little

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

GSAP was was bought by Webflow. Right? Yes. Yeah. Yeah. It is. So we've kind of been nestled up inside as well. So,

in the show notes.

just a phenomenal place to do that. I'm just, like, watching these things and just feeling ESLint like just

But we saw more and more of them. And I think what was happening was Webflow was kind of being used to, a lot of React people are used to declarative and just kind of popping stuff on your JSX, between HTML DOM elements and SVG

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

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

make the design process faster and easier. And because the design process was faster and easier and people could build out a site quicker,

I'm obviously very biased, but I,

just get really deep into it? Because it's not it's not an easy thing Totally. To

I think you sometimes see people doing tricks with box shadows where software stuff Yeah. At some point because, I always say

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 some of the those are are now done. Like, why not? I bet you just told us. You know?

Wes talked to, was it Nate from Motion? basically, it's it's JavaScript library for

GSAP is very performant under the hood though, Yeah. It also does some some things really well. I think it's it's been really interesting watching 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.

and opacity. Those are the safe, zippy ones.

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

So I think the sites that use GSAP that are very, very smooth, they're doing woo, like fifteen years now. Wow. Yeah.

elements,

for the event sites, we could kinda go crazy and use DSAP and make, like, silly nonsense. But there were a lot of, iteration of their interactions.

and it's a really friendly API.

smoother.

whether you're using GSAP or Node animation library, if you animate the wrong things, for example.

sometimes you hit these like it does

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.

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

easier to animate with than, let's say, like, other animation libraries? There's so many out there. Like,

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.

as well. But yeah, you So, this is kinda what I do in my spare time. Yes. So my my partner does, My partner is very, very clever and does, the thing that really got me about animating on the web was

Yeah. Yeah. Totally. And

It's obviously it's a different way to approach animations from

when you're animating, The AI But it's kind of animating objects. So,

I will inevitably run into, 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, GSAP is a

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?

But what you get with GSAPP is, you know, just a lot of flexibility That's a really good question.

Scott and me, I'm like, you know? Yeah. I was not expecting that. You know?

the previously paid ones Yarn now open for everyone.

draw lines in all kind of different directions, That's the one. Thank you.

either for animations or or just, like, building beautiful things on the web in general? of the way through a

I love looking through the car's software

Oh, Wes. It's just doing doing the math of figuring out how these things work, and it made it a little bit more

Yarn vehicle UI I actually, there's a GSAPP developer, like the safe hardware accelerated animations.

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

a lot of these, like, extremely what's that aesthetic where it's kind of,

And, yeah, I think

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, to take animations, in their UI stuff. I actually I had to turn down a job to do that at at GM.

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, was to create a timeline for each part of the animation.

the wrong properties. And by wrong properties, my top wrong properties would be filters

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.

a little bit trickier.

So what is it about GSAPP that makes it

So it's kind of there for if someone things like that where transitions is is a thing that I'm very excited about.

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.

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.

as well. So if you're doing something really, really jazzy, in GSAP.

Oh, that's a really good question.

after pseudo selector and animated the opacity, and all of those issues went away. So 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.

I think a lot of what people feel

There's also, I've seen GSAPP being used in hardware inside a big corporate, library.

GSAP works with with Canvas as well then? So there's 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,

and paths and, oh, I can animate them.

Yeah. I think as well, like, choosing the right tool for the job because there's differences

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, 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,

So there's still, you can get yourself into animate along motion paths, edit motion paths in the browser,

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

looked at that,

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.

do you think any of these things will ever,

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 So many 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.

and stuff like that. So, My favorite one 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.

and, like, browser standards and that kind of thing. So,

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.

definitely important to know know those things if,

design systems that we were building out where we weren't using external libraries.

Internet famous.

So 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

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, 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,

historically through my video synthesis, deal with UI, you know, same as writing code. You just think of the thing and then it happens.

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

where you can transforms

chosen Tom Miller, who's just written an article on Node Drops, and I think he might cover that.

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.

starting style or allowed discrete,

Also,

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

complex UIs, they're they're pretty heavy on SVG, aren't they? Oh, interesting. And

yeah, it's good to animate

how often, how frequent, how much,

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 Mark from Beyond Telloran that I should do some visuals for him at a conference.

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, 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,

So, yeah, that sort of thing, it's it's really nice to be able to have, like, a CSS alternative.

view transitions,

That's always the thing,

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, Yeah. Now now let's bring back the,

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.

the use GSAP hook. So you can import the hook.

that had GSAP under the hood. Oh, yeah. Yeah. Quite interesting.

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.

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

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,

and box shadows. Filters are horrendous

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.

for for the algorithm.

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,

special, I guess? What is the the secret sauce?

People were struggling a little bit. So we came out with a hook, 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 have in the past

when you wanna build something, do you decide, should this be DOM elements, SVG, or Canvas?

And then also, like, think about what's happening with your animations 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 text sequences.

Yeah. Yeah.

I think there was, like, a

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

that can cause a frame rate to drop? Yeah. So I think

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

about smoothness is easing.

but, to try and see whether it's something that we could utilise Shameless plugs. I mean, I guess the the main shameless plug is, like, GSAPP is all free.

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.

going the kind of Canvas 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.

it can get you into some odd trouble sometimes for sure.

you shouldn't animate too many SVG elements. That's kind of another rule.

performance

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 and tell you you need to floss more,

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

shaders route is probably the best.

you'll want to check out Sentry at sentry.i0/syntax.

what what makes GSAPP

And then if you are animating, So that's like half the file size, and how to keep people that are using your website.

That's our our our videos show up on, like, our TV a a conference or anything?

So because it's been around for a really, really long time, AI good. What about,

Yes. But, yeah, there's, I really like it when people make games and also has built in accessibility I didn't get super into Max MSP, the whole, like, nodules, Before then, it was all, like, you know, React, Astro, Svelte, whatever, React JS,

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,

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

with GSAPP that you just love pointing to?

with with GSAPP. That's always really fun.

for animation.

in the browser

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

I absolutely love SVG. So we've got, stuff that helps you morph SVGs, 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 and robustness.

all sorts of stuff. That's Yeah. What what is it about SVG that some people just Oh, man. This is like Winamp

that I was like, oh, it's just vectors

All of it is free. Go and play with the things. Make ridiculous stuff.

I did a little shader,

Amazing. Oh. Cool. Is there any,

web technology, and Canvas

For everyone.

I don't bet it. I know it. You just told us. So I,

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, the websites

Nah. Yes. Do this. Oh my god.

Oh, I've seen this.

in

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

non website

I love this. Cool. Hell, yeah. And shameless plugs, what would you like to plug? really appreciate you taking the the time.

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, 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

one second and and you wanna split that into 60 frames. They could spin up 60 different processes.

and they've got dreams of code that doesn't make any sense.

Yeah. Wes did a little video on on how he did that as well. So he he did one of these videos where he

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

the Flash aesthetic then. Let's bring back the Yeah. Flash interactivity.

Oh, that's a really good question.

a timeline at any given

that allows you to do video synthesis.

approachable for an idiot like me. Yeah. That is a good thing.

Each of those 60 process

yeah, come along. Oh, man.

they'll slide up the team icon, and they'll the the score will get really big, and

animation software for it, but I just I animate stuff with JSAP, and then I'll just make sure

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.

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

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.

replications

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,

Flash Flash was no more.

programmatically created all of the motion graphics.

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

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,

my GSAPP videos that I do, slash vector editor in the browser. Yeah. I think for me, I came into coding from a design background. So and, about the GSAPP being free announcement is the fact that all of the SVG plugins, rather than animating the properties of the box shadow itself, they kind of animate the opacity of a box shadow and a pseudo element 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.

for the next month with Webflow.

but I found that, like, AI is very good at explaining

to kind of chop it up into, 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.

the way I replicated it was with I found some WebGL

little noises on his synthesizer. And then Hell yeah. I can pipe the noises approach that I would do when I was doing really complex SVG animations, in our lounge.

machine.

any of the OG

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

And, yeah, it just makes,

garbage Node.

and they show it. They bring it up on the piece of software. Or, like, the dentist will also do,

like, noisy, Yeah. It's basically like React.

millisecond is

And then they had to update all of their, like, three d modeling

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, it can't do any

What's

of a river

Magic.

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

And it was sort of, like, right it came out right at that era,

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

That's amazing.

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

a community challenge familiar,

And, they had like a three d thing of my teeth

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

I would I would really love for, is the library.

way past Flash's time, but, like, maybe maybe this Wes seven or eight years ago, but the NFL was still using Flash you know, when they measure your gums

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

Smashing Scott is excellent. One of the best, like, web dev conferences ever. So I again,

If you're listening, Mark.

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

a new cohort of developers kind of using it as a way to learn and like an entry point into learning.

Yeah. Yeah.

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, Again, we've been using this tool for a long time, and it totally rules. Alright.

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,

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, So, yeah, timelines are

scrubs to its own millisecond make its way into

like, as the iPhone was killing Flash, and it was like, 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.

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.

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

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 DOM elements are a little bit more performant.

alright. Now we got it. You had to download a Silverlight thing and install it. And it was just like,

So I'm a use that for sure. It's so good. I for all of my, it was It it does it does some things very confidently

like, transitions. You Node, they'll they'll start the next animation.

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.

And, I think that's, like, that's what GSAPP is for me is is so many people, obviously, And most people that, you know, are code people.

said to Yes.

And

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,

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.

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

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

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.

Be able to set

We've we've both the top ones would be animating I forget what it's called. GSAP Video Export.

make those,

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,

to programmatically

incorrectly.

Yeah. Magic. I I did a little world.

Cool. Cool. Bye, folks. Peace.

I guess, fancy versions of old Windows.

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.

I know that a long time ago, I knew that the Npm,

I do. So my

drop shadows. Oh. Node. Yeah. Noisy drop shadows. You know? in web tech, whether it's CSS, SVG, JavaScript?

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,

So Remotion is

I've been I've been pondering it. I think I drunkenly Yeah. Yeah. Yeah.

those were all generated in Flash at the time. I bet

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

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

I I probably should use, like, a video,

like, online course workshop thing.

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

And

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

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,

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.

I was I was just lying there with little things in my mouth going like, what, what is this built with?

like, a hundred different like, let's say you have, a span with a space in it is not necessarily the same thing

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

what are they called? Custom thirds.

go to 50%

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.

in Remotion.

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

play around with the things and then maybe win some merch.

audio visualizer

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

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.

in The UK whose name I won't say because they're

transition,

and we've got a big projector my favorite sites and add them to the GSAPP showcase.

Like Yeah. Yeah. Oh, like a screensaver.

that were spinning around. And, and grab the timeline and then scrub through it and use that, MPEG I actually I made a little confetti cannon

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.

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

and GSAP for all of their, like,

like, given yourself doom?

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

And then he exported those to to video as well. And I often think, like, that's that's such a good way

Yeah.

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.

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

images and then puts it all back together again.

I'll I'll vouch for that. If you are in Europe or you wanna travel to Europe, certainly check that out.

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

we're running but imperative animation gives you a lot more control.

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,

Yeah. And you know where that is actually extremely useful?

graphics are built with with JavaScript?

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

it's so low level.

and then takes a screenshot, and then it comes back with those 60 frames and and puts it back into a video.

and, jitter?

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, like, this new tech I I the, like, JavaScript and web tech being used in unconventional vibes as well. So cool. Have you ever, like, like, DJ'd

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

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

at seconds, like you were saying, or you can do kind of relative to other previous animations, by a friendly professor.

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.

it feels so,

So GSAP's got timelines.

This should be easy.

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.

Yeah. You can do that. But you can also just do that with, like, an animation, JS,

Is it a good idea to, like,

Yeah. So you've got that, like, interaction with your users rather than just giving them, a video I got suckered in to having to put my face on the thumbnails 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.

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

to another one.

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.

Oh, yeah. Wow. So it's pretty meta.

to take timelines, compose them, to add them to

And, I I did you run into responsive, 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 Yeah. We've got,

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

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.

these? Is is there any tooling around that? 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.

animated, but, like,

So, like, compound emojis

splitting up really complicated

as text with a space. It's just a nightmare all the way down. Yeah. Yes. Yeah. It's stacked.

Oh, and split text,

were so much more

fill that some of that space. There's a lot of, like, plugins for this, of which, formerly,

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. And then the way they can do it quickly is that they'll spin up, like

at GSAP about the documentation? Because it seems really, really robust and solid.

Making carousels where you can kind of click the next or previous button, and it tweens a time scale of, like, an overall animation.

and, TypeScript. And that kind of gave us a funding mechanism to carry on with development and community support and making demos and stuff.

action script era of anything because

running into a rock, then

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

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

who comes from that era knows that the Flash websites that we used back in the day

The reason that we were acquired is to help them with the new some dev tools.

they they were more ESLint interface animation design in a way that was, like,

would be, So it's it's there if people want it.

zero with joiners. Right? They need to take a a a screenshot of every single frame.

of a timeline.

So I think,

I think that's why the position parameter is good for, like, positioning bits of an animation. Node

That's so cool. I I love all this stuff. I'm looking I'm just, like, playing around with the,

the reason you have that is because

Yeah. The the docs are great. I think we try and keep the docs like you're being very powerful animation library,

Devangari

interested in this. Okay. Cool.

many of them cost money or whatever.

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.

light builder for GCSE.

like like, what do you normally use JS, like, an increment for something if that value should be variable? What do you use to, like, visualize

Once you start

individual words and or characters. Right?

or play them in reverse at twice the speed. You can also Yeah. They are they go over the news and over sports programs and all of that sort of thing.

line issues So you can kind of, So,

So at some point, there will be a visual And, But, yeah, visuals, first impressions, they're important.

You can give them something that they can click with and play with and interact with.

That makes so much sense. You Scott love

hook up like a little, I started getting loads and loads of Webflow sites. It was probably, like, about a year and a half ago.

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.

just allows you very simple physics, no collision or anything like that. But, like, the demo here

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?

are objects, you can actually animate the time

and also handles as well. So if you wanna hang out in person and, like, move some things some things around, then, So,

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.

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

sequenced animations.

You can nest timelines So, yeah, Greensock is the company Node. Gotcha. And GSAPP

And position parameters, you can do absolute times,

masking

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

and you can fire callbacks pretty much anywhere to run custom logic.

for a little bit and then it jumping in the air and spinning around.

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

so missing from the web today. And I gotta love that this this seems to,

and and we were, like, very, very focused in on, we've Yeah. You you've both done, like, a really great job of that in the past as well of teaching people

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

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

press play and scrub along the timeline for. This to me, like,

this is really fun. So,

But that means that you can kind of create an animation

So with, like, building fun things.

anybody

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

or you can put a label at a certain time and you can hang them off that label 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

and being like, look, it's a pretty animation. Here you go.

learning GSAP, you can kind of go straight from your head into making the things. Because you you don't have to because GSAPP is all just animating objects and timelines he makes

Yeah. It's really pretty cool. It's so much fun. I think, like, as you were saying that it made me think that,

But once you do have, to GSAPP? I'm thinking about

for some of this. And, like, being able to, like, have that that tool that you can physically

Yep. Yeah.

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

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, talked to But we kind of found that people were using GSAP and Greensock interchangeably.

or speed them up, There's so many things in the GSAPP showcase,

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

animations 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?

demos right now. So to just give the audience some some perspective there, it basically this?

by default,

you often wanna animate

Important priorities.

timeline scrubber to your timeline, and you can play through it and pause and, like, loop sections and stuff like that.

inside other timelines.

on the, on the release page for,

more

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

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

put each of those steps as, like, seconds or,

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

other ones, to build these complex things, and it really makes me understand why people like this so much.

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.

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 kind of way of referring to it?

GSAP, man, is one of those things that, like, really feels like

I think it's a really exciting time to be talking to you about this given,

Amazing. Very exciting. And and that's because What is video synthesis?

So sets like ESLint transforms So it's something that is a bit tricky in CSS.

And, yeah, all of that is free now. So Wes animations API is exciting

on dumb elements.

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, GSAPP as an action script library.

is because we had some club plug ins, like some little bonus extra animation goodies that we put behind a membership,

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, Oh, Matt Perry. Matt. Oh, Matt Perry. Why did I say this, Nate? I really, I like the hybrid approach

It's just JavaScript.

super exciting.

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

I think it had it had a little bit of, It's called an Eyezy

Yeah. Totally. Yeah.

it's a good thing. It's a really good thing. But I think, yeah, the the branding did need an overhaul.

Yeah. I mean, I understand that. I actually We're just kind of trying to use what was available on the web.

websites, Yeah. Yeah. Definitely. So, I mean, that's the most exciting bit for me, yeah, I guess another thing that I could plug is that, from Critter and Katari.

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

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

So so JS GSAP,

GSAPP, though, the branding on it rules. It looks great. The landing page looks great. It all feels super modern.

It's very,

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

like, way, way, way back in the day. And that was entirely because I was new They were a Club GSAP plug in and they're free Node. So if you want to use that, that's free.

So is GSAP,

GSAP stands for Greensock Animation Platform.

because I remember this as Greensock. Is Greensock and GSAPP the same thing? Just a rebranded

before I learned GSAP, I started Oh, yeah. And you just yeah. So I think there's show up with a box of It's it's AI.

side. That makes so much sense. You know, I always thought the animation library was

what? Or is it using CSS? Is it using the Wes animations library? What's going on under the hood?

with anime

lost it, and the whole the new design looks amazing. Were you part of that? Yeah. That was,

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.

and they they had the jazzier sights.

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.

Sanity was just kind of easier to just lean into the GSAP So Oh, man. Quite a common animation challenge.

using

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, when, like, my kids are flipping around or I'm trying to watch something, and then it's just like, boom. Huge.

that you can use to animate pretty much anything. So HTML elements or SVG

three d things, which is long overdue, Chinese characters and all of that sort of thing.

UI stuff,

or

they'll remember, 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.

I think

yeah, very, very excited. Wes, how are you doing today? I'm good.

some some news that just happened. And and in general, I I think it's really cool. So,

pretty much anything that JavaScript can touch. And it's been around for, you can program in Python or openFrameworks.

For the for the, the people that have been around since the Flash days, I like that. Yes. You can control timelines with control methods like play or pause, any of the physics sick pick, that does a whole bunch of things, and then you can just tween the progress of that. Wow, that's amazing.