899: GSAP: Killer Web Animations With Cassie Evans  ## Metadata - Author: [[Syntax - Tasty Web Development Treats]] - Full Title: 899: GSAP: Killer Web Animations With Cassie Evans - Category: #podcasts - URL: https://share.snipd.com/episode/f4274437-df43-4a10-adb6-cd3c7453feb6 ## Document Notes ## Highlights - **GSAP's Evolution and Rebrand** - GSAP stands for GreenSock Animation Platform, evolving from the Flash era into a powerful modern animation library. - The rebrand to GSAP reflects a more contemporary and approachable identity, boosting user interest and adoption. Transcript: Wes Bos Yeah, sure. Cassie Evans So GSAP is a very powerful animation library that you can use to animate pretty much anything. So HTML elements or SVG or UI stuff, 3D things, pretty much anything that JavaScript can touch. And it's been around for, whoa, like 15 years now. So for the people that have been around since the Flash days, they'll remember GSAP an action script library. So it's kind of been like at the forefront of web animation for a really long time now. Wes Bos Man, and GSAP just had like a major kind of rebranding as well, which was, I think, great. Because for the longest time, it was like a superhero man and it was extremely popular. I think a lot of people kind of wrote it off as like that kind of whole vibe lost it. And the new design looks amazing. Were you part of that? Cassie Evans Yeah, that was on my hit list as soon as I started working at GSAP. One of the things about Jack, the library author, is that he's very averse to change, which when you are maintaining a library that's used on like 12 million websites, it's a good thing. It's a really good thing. But I think, yeah, the branding did need an overhaul. I think it had a little bit of nostalgia for the Flash era for people that were around, like the gen z youth they didn't get the nostalgia they were just like why is there this green man with Scott Tolinski A superhero cape so so is g sap because i remember this as green sock is green sock and g sap the same thing just a rebranded kind of way of referring to it so yeah green sock is the company Cassie Evans Name ([Time 0:01:13](https://share.snipd.com/snip/442ef475-e6af-49f8-8bd4-a01b9e281ea3)) - **Learning JavaScript with GSAP** - Cassie learned JavaScript through GSAP, which made coding engaging compared to traditional tutorials. - Using GSAP sparked her passion by enabling creative, generative art directly in code. Transcript: Scott Tolinski What is it about GSAP users that allow them to build this kind of stuff? Holy cow. Cassie Evans Yeah, it's, I mean it's a really fun library um like i actually learned how to code through gsap yeah when i was first learning javascript i i am i didn't really connect with a lot of the Tutorials online i'm sure you've had a similar kind of experience where it was like you know fizzBuzz and logging out stuff to the console and array methods and stuff. And I was like, 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. Wes Bos Yeah, I love that stuff as well. Like if you want to be, if you want to learn something, you have to pick up something that is really exciting to you, right? And I'm the same way as well, to a point where I ban the use of FizzBuzz or Fubarbaz from all of my tutorials because it's just, it's certainly a lot of people enjoy that. They love being able to ([Time 0:08:58](https://share.snipd.com/snip/a599d2a7-456a-4b1d-98ea-78b501f1377d)) - **Pick the Optimal Animation Tool** - Choose the right animation tool for your use case between DOM, SVG, and canvas to balance performance and visual effects. - For highly complex visuals, canvas shaders may be more suitable than heavy SVG animations. Transcript: Cassie Evans Many out there like what what makes gsap special i guess what is the the secret sauce so yeah i think i wouldn't say gsap is easier to animate with than other animation libraries there's Like some very specialized animation libraries that are good for particular frameworks and for doing particular things but what you get with gsap is you know just a lot of flexibility And robustness so because it's been around for a really really long time jack's kind of seen what animators wanted to do from back in the flash days on what they were struggling with and He's kind of built the tools around that i always say i'm obviously very biased but i um redid all of the gsap docs i've been using gsap for years and years and. And every time I build something really challenging, I will inevitably run into a wall or a problem space and I'll check the docs and there'll be something there for that problem space. Wes Bos Just been around for so long. And one area is this works entirely with SVG as well, right? It's one thing to animate a ([Time 0:11:34](https://share.snipd.com/snip/ab5e32ab-0364-4ddc-afba-7a9f4b560917)) - **Animate Efficiently for Performance** - Animate primarily transforms and opacity for smoother performance and hardware acceleration. - Avoid animating costly properties like filters and box shadows to prevent frame rate drops. Transcript: Cassie Evans Accelerated animations gsap is very performant under the hood though um as well but yeah you can still you can still get yourself into problem spaces if you're like i'm going to animate Filters all over my website or i'm going to animate box shadows everywhere we're going to have new elements show up animate on. Wes Bos Are there any like gotchas that you should look out for just in general? Things that can kind of be expensive that can cause a frame rate to drop? Cassie Evans Yeah, so I think the top ones would be animating the wrong properties. And by wrong properties, like my top wrong properties would be like filters and box shadows. Filters are horrendous for animation. I think you sometimes see people doing tricks with box shadows where they have, rather than animating the properties of the box shadow itself, they kind of animate the opacity of a box Shadow and a pseudo element and stuff like that. So, yeah, it's good to animate where you can transforms and opacity. Those are like the safe zippy ones. 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 thing. Oh, yeah. Scott Tolinski I had the craziest slowdown issue with the site I was building, where there's just like a massive grid of squares. And when you click on them, the square changes the background. And I was animating the background color just from transparent to color. And the frame rate on the site was crazy bad. And I was just thinking like, this is so weird. And then sure enough, I just did it with a, after Sludeslector and animated the opacity and all of those issues went away. So definitely important to know those things if it can get you into some odd trouble sometimes for sure. Cassie Evans 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 ([Time 0:15:46](https://share.snipd.com/snip/01855b3d-78cf-458a-80ad-ec327f187064)) - **Use GSAP React Hook for Integration** - Use the GSAP React hook to simplify animation cleanup and scoping in React applications. - This hook addresses common difficulties integrating GSAP imperatively within React's declarative paradigm. Transcript: Cassie Evans Yeah, so you can use GSAP anywhere, but React is historically a little bit trickier. People were struggling a little bit. So we came out with a hook, the used GSAP hook. So you can import the hook. And then under the hood, that kind of handles all of the animation cleanup for you. 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 do the fun things. So it's there if people want it. Scott Tolinski I just was looking on the website and sure enough, there's a video of you talking, gsab hook so yeah i i hate that my face is in all the thumbnails i got suckered into having to put my face On the thumbnails for the algorithm for the algorithm i know when we started worrying more about the youtube algorithm it's like all ([Time 0:20:40](https://share.snipd.com/snip/69f3dca1-b0d8-4a09-8d78-f2a89bc7ea40)) - **GSAP Timelines Are Powerful** - GSAP timelines allow precise sequencing and nesting of animations beyond CSS capabilities. - The ability to control timeline properties like play, pause, speed, and reverse adds powerful flexibility. Transcript: Scott Tolinski Yeah. And I was looking at GSAP. 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 like, what is a timeline and why would that be considered a killer feature? Cassie Evans So yeah, timelines are sequenced animations. So it's something that is a bit tricky in CSS. Like keyframe blocks don't have understanding of other keyframe blocks. So if you've got, you know, two animations, and you want them to run one after another, you have to add a delay to another one. So GSAP's got timelines, I think a lot of animation libraries have got timelines now. But GSAP'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. 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 GSAP is all just animating objects and timelines are objects, you can actually animate the time of a timeline. So it's pretty meta. 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 gsap developer Uh tom miller who's just written an article on code drops and i i think he might cover that making carousels where you can kind of click the next or previous button and it tweens a timescale Of like an overall animation. Wes Bos Oh, yes. What you mean is like you can scrub an animation? Is that what you're trying to say? Scrubbing, yeah. So you have like a 10 second animation, but you could scrub it to five seconds if you want to go in the middle? Cassie Evans 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 Scott Tolinski Man there's so many cool demos here i'll ([Time 0:26:30](https://share.snipd.com/snip/350f7c79-8bdc-4184-85f3-2f1f881ad86e)) - **Structure Animations with Timelines** - Break complex animations into smaller timelines for modularity and easier sequencing. - Use absolute or relative positioning parameters to flexibly arrange animation sequences. Transcript: Wes Bos 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 as like an increment for something if that value should be variable so that i think that's Cassie Evans Why the position parameter is good for like positioning bits of an animation um one approach that i would do when i I was doing really complex SVG animations, um, 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 as one part and like maybe the entrance animation is one part. Um, 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, is usually a bit more flexible i see Wes Bos So like when something and i assume you could also probably like react to to something as well like when this animation hits a specific thing like when it hits running into a rock then Start the next animation yeah yeah yeah what do you use to like visualize these is there any tooling around that That's a really good question. Cassie Evans So I don't at the moment. It's just kind of all in my head. And most people that are code people, once you start learning GSAP, you can kind of go straight from your head into making the things because you don't have to deal with UI, you know, same As writing code, you just think of the thing and then it happens. ([Time 0:29:36](https://share.snipd.com/snip/15891fe9-41e5-4c7c-aaa2-bf9ac5ffa18e)) - **Confetti Cannon Brings Joy** - Cassie created a confetti cannon animation on GSAP's free announcement page just for fun. - Interactive animations give users small joyful moments, enhancing engagement with the site. Transcript: Cassie Evans Other work. But I was like, I'm going to make a confetti cannon. Important priorities. But, you know, just that sort of thing. It gives someone just a couple of seconds of their day that they'll stop and smile at something. And I just really love that. Scott Tolinski It makes so much sense, too, that this comes out of the um action script era of anything because anybody who comes from that era knows that the ([Time 0:34:05](https://share.snipd.com/snip/5324dbd7-694e-4967-9010-9a30358ec928)) - **Shaders Present a Learning Challenge** - Shaders remain a challenging but exciting area for web animation enthusiasts. - Better understanding of shaders could unlock powerful visual effects for web developers. Transcript: Scott Tolinski As the iPhone was killing Flash. And it was like, all right, now we got it. You had to download a Silverlight thing and install it. And it was just like, why would anybody pick over over flash at this point or soon to be html5 is why they did it oh yeah no totally those were the dark days like post just post flash before Cassie Evans The other things came along yeah i know i remember that in uh post-Flash utopian era at the moment, though. It feels like we've kind of got all the good things that we had back then, but with a little bit more knowledge about performance and accessibility and how to treat people that are using Your websites and stuff. Scott Tolinski Yeah, now let's bring back the Flash aesthetic, then. Let's bring back the Flash interactivity. Yeah, we'll start the past for everyone. Yeah. Wes Bos Yes, exactly. We need more. Screw whimsy. We need just like full immersive like video game intro to websites. So I have a question about that. Not about video games, but about the web in general. Is there anything missing that you would absolutely love to have in web tech, whether it's CSS, SVG, JavaScript? Cassie Evans Oh, that's a really good question. I would ([Time 0:46:56](https://share.snipd.com/snip/d47deb0c-2348-4e37-8c5a-71c0dc439708)) - **AI's Mixed Impact on GSAP Coding** - AI is a mixed bag for GSAP coding, sometimes producing useful guidance but also confident incorrect code. - Many developers struggle with AI-generated code and still benefit from community support for problem solving. Transcript: Wes Bos Could use like a blend mode on my elements to sort of make it look like that. And I was just trying to like change the values to make it a little bit more grungy. But I found that like AI is very good at explaining how these things work. And it made it a little bit more approachable for an idiot like me yeah that is a good thing that ai what about ai and gsap is is there any is ai good at writing any gsap stuff it's it's ai um Cassie Evans It does some things very confidently incorrectly. It also does some things really well. I think 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 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. ([Time 0:50:30](https://share.snipd.com/snip/03e3553d-f3df-4dda-ad41-d4e274ac3388))