GreenSock with Cassie Evans

Episode Description

Cassie Evans explains web animation techniques, the power of GreenSock/GSAP, why React makes animation difficult, and the undervalued craft of creative development.

Episode Summary

This episode features Cassie Evans, a creative developer at GreenSock, discussing the landscape of web animation and her journey from designing banner ads at an agency to working on one of the most popular animation libraries on the web. The conversation begins with Cassie explaining how she transitioned from design and motion graphics into coding, partly through the nonprofit Codebar, and quickly moves into the technical distinctions between CSS animations and JavaScript-powered animation using GSAP. She clarifies that GSAP is not limited to SVG — it's a high-performance property manipulator capable of animating HTML, SVG, canvas, WebGL, and three.js. A significant portion of the discussion centers on why React's virtual DOM abstraction makes animation particularly difficult compared to frameworks like Vue or Svelte, and Cassie teases upcoming tooling from GreenSock to ease that friction. The hosts and Cassie also explore animation accessibility, including the use of prefers-reduced-motion and toggle options, before reflecting on how bootcamp culture and the dominance of React have led many developers to overlook the craft of visual design and animation — a skill set Cassie argues is undervalued partly because it's been feminized and dismissed in favor of more "functional" programming work.

Chapters

00:00:00 - Meet Cassie Evans and Her Path Into Creative Development

The episode opens with introductions and a discussion of Cassie Evans' background as a creative developer at GreenSock. She describes creative development as the "front of the front of the front end" and traces her journey from design and motion graphics at a small agency into coding through banner ad production. Her early work pushed beyond what CSS could handle, leading her to discover GSAP when Google added it to their CDN for use in lightweight banner ads.

Cassie also shares her involvement with Codebar, a global nonprofit focused on bringing diverse people into tech through weekly pair-programming workshops and mentoring. She ran the Brighton chapter for three years, providing an accessible entry point for aspiring developers from all backgrounds — an experience that shaped her approach to teaching and community building in creative coding.

00:04:30 - CSS Animation Limits and What GSAP Actually Does

The conversation shifts to a technical breakdown of where CSS animation falls short. Cassie explains that CSS lacks timelines for sequencing animations across multiple elements, forcing developers into fragile chains of delays. She also highlights the difficulty of independently controlling transforms in CSS, something GSAP handles cleanly. This leads to a broader discussion of what GSAP actually is — not a polyfill or SVG-specific tool, but a JavaScript-based property manipulator that can animate virtually anything, from DOM elements to WebGL shaders.

The hosts work through a concrete example from the GreenSock website to understand how an animated SVG demo functions, with Cassie clarifying that the JavaScript is updating SVG properties directly. This prompts a useful primer on SVG itself, which Cassie describes as "HTML but for graphics," and a clarification on the deprecated SMIL animation standard versus modern CSS and JavaScript approaches to animating SVG elements.

00:10:53 - The Beginner's Path Into Web Animation

Christopher asks where a newcomer should begin when approaching web animation. Cassie lays out a clear progression: start with simple CSS hover transitions, move to keyframe blocks for multi-step state changes, and graduate to JavaScript timelines when coordinating animations across many elements. This natural escalation illustrates why reaching for a powerful library like GSAP too early can feel like overkill, while also showing why it becomes essential for complex work.

The discussion then pivots to the challenge of using GSAP within React. Cassie explains that React's virtual DOM deliberately restricts direct DOM manipulation, which is exactly what animation requires. Vue and Svelte offer easier hooks into the actual DOM, making animation far more straightforward. GreenSock is actively developing new tooling to bridge this gap for React developers, and Cassie invites listeners interested in shaping that work to reach out for early access.

00:16:50 - Framer Motion, ScrollTrigger, and Scroll-Based Animation

The hosts compare GSAP's approach to Framer Motion, noting that Framer Motion excels at state-change and layout animation within React, while GSAP occupies a different space — timeline-based animation that can span HTML, SVG, canvas, and WebGL. This distinction clarifies why both tools coexist rather than compete directly. Christopher brings up Apple's product pages as a well-known example of scroll-driven animation, and Cassie points to GreenSock's ScrollTrigger plugin as the tool designed for exactly that kind of complex scroll-based interaction.

The conversation then turns to accessibility. Cassie emphasizes the importance of not distracting from content users are trying to read and shares research from the Nielsen Norman Group showing that average users often can't distinguish heavy entrance animations from slow page loads. She recommends checking for prefers-reduced-motion, building reduced-motion alternatives from the start, and adding a visible toggle when time allows — a practical approach that balances user experience with real-world agency constraints.

00:23:22 - Creating SVG Animations From Scratch

Christopher asks Cassie to walk through the practical workflow of building an animated SVG, using her self-portrait CodeSandbox as an example. She describes starting in Adobe Illustrator with well-named layers and a clear animation plan, then exporting the SVG and moving into a coding environment like CodePen to bring it to life with GSAP. She notes that beginners don't need to create their own SVGs — any existing SVG can be animated immediately.

Cassie also recommends her own talks and workshops for people looking to learn SVG animation, highlighting that her workshops welcome people from all experience levels, including backend programmers and illustrators who have never touched JavaScript. She mentions that the GreenSock Getting Started guide is being revamped to be more agnostic and beginner-friendly, offering another accessible entry point for newcomers.

00:26:11 - The Lost Craft of Creative Web Development

The final stretch of the episode becomes a broader reflection on the state of web development culture. Cassie pushes back on the idea that animation is dying, arguing instead that bootcamps and the React-centric ecosystem have devalued design, CSS, and interaction work — skills she notes are often feminized and therefore dismissed. She points out that her own visually impressive portfolio uses no JavaScript framework at all, just vanilla JS and careful craft.

The hosts acknowledge their own bootcamp experiences skipping quickly past HTML and CSS, and Christopher reflects on how years of framework-heavy development have eroded his ability to think creatively about visual design. The episode closes with Cassie sharing where listeners can find her work and workshops, a mention of her collaborations with Front End Haus, and a lighthearted correction of Christopher's repeated use of "skip the gun" instead of "jump the gun."

Transcript

00:00:00 - Christopher Burns

Animations. Is this really black magic? I think to most people because, well, we'll get to that. Cassie Evans, welcome to the show. You are a developer at GreenSock. GreenSock is a really interesting company because I would say the website looks a bit retro for today's standards, but all the examples are really cool stuff.

So I'm really excited to deep dive into these things of animations. I think what we should start with before we get to this black magic of animations is how you got started in programming, how you got to where you are today. And I don't want to add a caveat, but so many Americans, when they hear British people talk about how they get into coding, sometimes it's so different. Like we learn in school or we self-teach, no bootcamps unless you learned in the last year.

00:01:03 - Cassie Evans

Yeah. I think the fact that you paused before saying developer is a good intro to this because, yeah, I'd term myself a creative developer. I've heard front end web development nowadays being divided into the front of the front end and the back of the front end. Creative development is like the front of the front of the front end. That's kind of where I am, doing animation.

I initially did design and motion graphics at a little agency, just kind of gradually got into coding through doing banner ads. I did banner ads for a while, then kind of decided that I wanted to break out of the restraints of the little tiny boxes of ads and make bigger websites, and then got involved with Codebar, which I'd happily chat about. That's a whole podcast in itself. So yeah, I guess I got in from the design side of things.

00:01:54 - Anthony Campolo

Yeah, I have no idea what Codebar is. I'd be curious to get just kind of a short little description of, like, what is that?

00:01:59 - Cassie Evans

You'll have to stop me because I'll ramble. Codebar is a nonprofit. It's all over the world at the moment. It started, I think, in America, maybe in England. I'm not sure. But it's a nonprofit that is focused on helping get more diverse people into tech.

In Brighton, I started going along to Codebar Brighton to learn how to code, and then the organizers moved on. They got different jobs, and I ended up running it for about three years. Yeah, we threw weekly workshops teaching people how to code. And you kind of do pair programming, so you get paired up with another local developer. So you get a bit of a mentoring vibe as well, which is really nice.

00:02:38 - Christopher Burns

I think the tech scene in the UK is so interesting. It's also really funny because the UK is such a small country. We're still so densely populated compared to, say, America. But then your experiences of going to this charity, teaching how to code, there's nothing like that where I live, only 300 miles upwards. But that's because I live in Farmers County. Probably you would call that Ohio in America. We make a lot of potatoes.

Well, where I am is this really interesting thing where these banners that you're talking about, are you talking about your classic Bootstrap website and it's like a hero banner kind of banner, or do you mean more like advertisement banners on, like, Google banner ads?

00:03:24 - Cassie Evans

I guess that's industry talk for ads. You probably don't know about that because everyone has ad blockers and no one sees them. So I was just creating little terrible advertising boxes with code at an agency. But it was fun because we got to do animation. But also you're kind of working for the ad world and nobody's seeing your work, so that's the downside.

00:03:46 - Christopher Burns

It's a curious question: how do those ads work? Is it HTML? Is it CSS? Is it SVG, or is it Flash? Well, it used to be Flash, probably.

00:03:55 - Cassie Evans

I started off making those ads with HTML and CSS. And then I kind of gradually got a little bit too overenthusiastic with the animation that I was trying to do and couldn't do it feasibly with CSS anymore. Just around that time, Google allowed GreenSock to be used. They added it to their CDN so you could use GreenSock in banner ads without adding to the weight of the banner size, because banners have to be under a certain number of kilobytes. So that's kind of how I got into GreenSock, through banner ads.

00:04:30 - Anthony Campolo

That's interesting. You say that you were going beyond what CSS could do because I know there's some people who are very big on the vanilla CSS train. They're like, you can just use CSS for everything. You don't need CSS libraries or frameworks or anything like that. But it sounds like animation is an area where it's going to just be pushed too far. Where does it hit limits? Like, where does CSS break down for animation?

00:04:54 - Cassie Evans

There's quite a few things, really. I think the main thing is that you don't have timelines with CSS. You can't create sequenced animations. You can kind of fake sequences of animations with delays. So you can create one animation with some keyframes on an element and say it's three seconds long. You can create another keyframe block, and you could give that animation a three-second delay, and then the second one would start after the first one finishes. But once you start trying to do that for six, seven, eight different elements, it gets incredibly knotty very quickly.

Another thing is that you can't separate out transforms. Transforms have a stacking order in CSS. It matters which order you add rotations and translations. Whereas with GreenSock and some other JavaScript libraries, you can animate transforms separately, which is really helpful.

00:05:50 - Christopher Burns

We've quickly just spoken about GreenSock and CSS, but I think it's worth abstracting animation a bit higher in terms of the web. It's hard to realize sometimes, but there are many different ways to do animation. The most common one that I know of, and I've used, and we've all probably used, is keyframes, as you said, either just looping an animation in CSS or changing the opacity, changing the size. That's your keyframe CSS animation.

But then what you tend to see, and this is where I'm guessing GreenSock is more like using JavaScript to manipulate an SVG. Is that correct?

00:06:28 - Cassie Evans

No, no, not even slightly. It can. You can use GreenSock.

00:06:34 - Christopher Burns

SVG animations.

00:06:36 - Cassie Evans

To animate SVGs. Yeah, a big difference between GreenSock and CSS is CSS. You can use it to animate DOM elements, HTML elements, also SVG elements. It's a little trickier with CSS and SVG because SVG is a little unreliable cross-browser with CSS animation, so you can get kind of into tricky cross-browser bug situations quite easily.

GreenSock animates anything. It's like a high-performance property manipulator. So you can use GreenSock to animate HTML, DOM, or you can use it to animate SVG, and it fills in a lot of the cross-browser inconsistencies for you. But you can also use it to animate canvas or WebGL, pretty much anything you can think of: shaders, three.js, all the things. It animates everything.

00:07:22 - Christopher Burns

Okay. So, like I thought, I thought I knew how all this works. It's like CSS animations and you had JavaScript manipulating stuff to make animations. What is GreenSock then? Is it just a JavaScript library that is polyfilling, abstracting all these other things into a consistent library at its highest level?

00:07:41 - Cassie Evans

GSAP is the library. GreenSock is the company. GSAP, it's a property manipulator, so it's not really polyfilling things. It is changing properties, like tweening properties in HTML or CSS land. It is creating matrix transforms. It's basically doing inline transform animations, like inline CSS animations.

Whereas if you're talking about canvas or WebGL or three.js kind of stuff, it would just be updating numbers because that's all WebGL and canvas and stuff is. It would just be updating properties, but within JavaScript objects.

00:08:21 - Christopher Burns

Let's take an example of the sandboxes on the GreenSock website. It's just a simple low poly experiment. It's dropping a drop into a flask. It's one of the ones on the home page. Any developer can see there's HTML, the CSS, and JavaScript. If you remove the JavaScript side, then this would no longer animate at all. It would just be static. You're programming the animation, or functionally with a function that then calls and then loops the animation, right?

00:08:55 - Cassie Evans

This is using SVG.

00:08:57 - Christopher Burns

Okay.

00:08:58 - Cassie Evans

There's not any HTML. There's not really any CSS styling either. That's all SVG. And then the JavaScript is updating SVG properties.

00:09:08 - Anthony Campolo

Ah, we should talk about what SVG actually is.

00:09:13 - Cassie Evans

Yeah, I think that would be helpful.

00:09:15 - Anthony Campolo

Because I know SVG. It stands for Scalable Vector Graphics, and it's, as far as I know, a good way to just numerically specify a shape and a color. And that's kind of, at its most base level, what it is. So it's kind of like my SVG 101, but I'm sure you can give a much more eloquent and complete definition there.

00:09:36 - Cassie Evans

I like to think of SVG as HTML, but for graphics. It's kind of the easiest way to think of it. You have elements in SVG just the same as you have elements in HTML land, but the elements in SVG will create polygons or they'll create triangles or lines or rectangles. It's basically for drawing, whereas HTML is for documents.

00:10:00 - Anthony Campolo

That's a good, clean definition. And then it can also do animations as well. So how built out are the animation capabilities?

00:10:08 - Cassie Evans

I think that it's best to think of SVG as a thing that gets animated the same as HTML elements get animated. You animate SVG elements. It gets confusing because there was SVG animation. SMIL was the built-in SVG animation, but I think it was deprecated. I don't think it's deprecated anymore. You can still use it, but they're not actively maintaining it. They stopped actively maintaining it to move support over to CSS animation.

So you can animate SVG elements with CSS exactly the same as you would HTML elements, but you can do more with JavaScript, same as with HTML and CSS. So JavaScript just kind of gives you a little bit more control using a JavaScript animation library.

00:10:53 - Christopher Burns

I think the reason why this is all so interesting, I want to say hard to explain, hard to understand, is that when you look at it as a standard, you know, functional programmer, you know, logical. I'm building a backend or a front end of the back end, as you said, your front end of the front end. It's like you basically are making everything look pretty and animated and bring the wow factor. It's that thing. It's like, how does it work?

And we've already spoken about that. It's so hard to actually try and explain and understand. In my eyes, it's like, where do you start? Oh, I'll start with CSS animations. What I'm trying to get to is where do you start feeling the barriers? What's the beginner's path into animating anything, going from nothing, as I've got a standard HTML page and now I've got something completely animated, like your own portfolio website that I think is pretty cool.

00:11:46 - Cassie Evans

I think if you're animating HTML elements or SVG, and you're kind of just starting out with animation, small, simple things like hover animations. If you hover over a button and it changes color, that's a good use case for CSS because you can do that in like one line. You've got hover and then you change the background color, and that's it. And you can add a little transition and you can add easing. So you can kind of play with how the transition feels and how long the transition is.

And then keyframes are the next step of complexity. So if you've got more than one state change in your animation, you say you're changing the color and then you want it to spin around and then you want it to do something else. You could do that within a keyframe block.

And then if you've got multiple elements and you want all of them to have lots of different steps and you want them all to be ordered one after another, then you're going to need a timeline. And then that's what you'd need to lean on JavaScript for.

00:12:43 - Christopher Burns

So it's this multi-step process. You don't want to almost jump straight into something like GreenSock until you know you need it. But it's that thing. It's like a super powerful tool, but then it can be a little bit overkill if you're just going to hover, change some CSS, I guess, because you can do that as well, is my bet.

So the big thing that I really wanted to cover is we're really sadly, and I say sadly with a caveat, a really React-heavy podcast. And animating and React, they don't seem to go together, unlike Vue and animations do. Could you try and explain to us why that is?

00:13:24 - Cassie Evans

We've recently written a series of two articles at GreenSock, like Getting Started with Animation within React and then a kind of more advanced animation with GreenSock and React, because the main issue is that React abstracts everything away from the DOM, and you're dealing with just state. That's really good for a lot of things, but when it comes to animation, animation is DOM manipulation. You are manipulating the DOM directly and it can be quite tricky within React because React makes it deliberately hard for you to do that.

Whereas with Vue you've got, you know, unmounted callbacks and you can just directly access the DOM with hooks. It's a lot harder. So we've written a couple of articles to help people, but we're also, this is kind of secret still, but I'll let you guys know: we're working on some tooling to help with GreenSock and React as well. So we're still in early stages of that.

But if anyone that's listening is really into React and animation and would like to shape the future of that, just get hold of me and I'll be able to give you access to top secret demos, and you can give some feedback.

00:14:35 - Anthony Campolo

And when you say tooling to help with that, could you describe just a little bit what exactly that means? Like, how is the tooling helping? Like, what is the tooling doing?

00:14:44 - Cassie Evans

It's still very, very early stages, but I think that we're trying to solve some kind of frequent animation problems, as well as providing a kind of wrapper around GreenSock so people will be able to use timelines nice and easily, and just general GreenSock functionality without kind of having to jump through a lot of React hoops, which is the issue at the moment. There's a lot of hoops to jump through.

00:15:10 - Anthony Campolo

So you just have to use timeline, right?

00:15:12 - Cassie Evans

Yeah, it would be good.

00:15:15 - Christopher Burns

So the big reason, like you just said, is that all of the frameworks that basically say no virtual DOM means animating with them is super easy because you're just using the actual DOM, but because React abstracts the DOM into this complicated list, basically, it's harder to run animations on it because instead of trying to interact with the actual DOM, you're trying to interact with a list, and then the list needs to actually then interact with the DOM to provide the animations. And if there's like 5,000 animations being triggered because you've got super complicated animation, it starts getting pretty confusing pretty fast.

00:15:51 - Cassie Evans

Yeah, definitely. Everything is significantly harder when you're using React. It's a bit of a tricky situation, actually, because I think that a lot of newbies see React as the most popular framework, and they see GSAP as the most popular animation library, and they think, oh, well, I'll just use those two things and then that will be easy and everything will work.

When in actuality, if you're doing a very, very animation-heavy site, it might not be React that you want to reach for. It might be easier to use, like, a static site generator potentially, and then just focus on the animation. But obviously lots of people are going to use React and already have existing projects, so we kind of want to make it easier for people to use animation within React.

And I think there's a lot of common animation problems that people have with React, like entrance and exit animations and stuff like that, and we think that we can help handle those better. That's kind of what we're working on at the moment.

00:16:50 - Christopher Burns

Animation is a really interesting problem to solve in React. The only really popular animation library that I know of is Framer Motion. I was gonna say React Motion. Literally everything called something motion is something out there, but the one I keep meaning is Framer Motion.

To me, it doesn't really seem like it's more animating an image or a scene. It's more about animating your layout. They are two different things, right? They kind of use the same things, but the goals are completely different in how you would animate it.

00:17:25 - Cassie Evans

Yeah. So that's the difference between state changes and timeline-based animation. Framer Motion is wonderful and it does state change animation. I think it's got spring animations as well, which is really nice, but I think that GreenSock is used in a little bit of a different space again, because with GreenSock you can animate everything.

So people that maybe are building React sites, but also wanting to use three.js or wanting to use SVG or canvas or that kind of thing, it would be helpful if we made things a little bit easier for them.

00:17:58 - Christopher Burns

Whenever there's a new Apple product out, so many web devs quickly rush to the Apple website and see how they've animated it. If that's scroll locking, if that's moving an iPhone in and out of the frame, and that's then tweaking animations using scroll, would you say that primarily is more using something like a timeline compared to using something like a more layout-manipulating way?

00:18:21 - Cassie Evans

Yeah, definitely. We've got a plugin actually called ScrollTrigger. So that is exactly what people would want to be using if they were creating complex animations on scroll.

00:18:30 - Christopher Burns

And these animations are amazing. It's that fine balance between, as I was saying, this is an animation for your home page of your website to look really pretty, and this is an animation on your dashboard.

One of the other things I did really want to talk about is accessibility and animations. I don't know much about this myself, but I thought you could probably provide some really good insight into how do you make your animations accessible? How do you make sure that people can access it and enjoy the experience you're building? Because I've actually seen some of the websites you've built firsthand, and they're beautifully crafted. I mean, I'm decent with the web, but they just feel like the next level. So I wonder, how do you keep that fine line between something that's accessible and that looks animated and unique?

00:19:23 - Cassie Evans

Definitely. It's a really important thing to think about. And I think that, as with most things with coding, it's "it depends" that's the first thing you think. You kind of have to look at who your website is for. So for example, my blog, that's mine and it's for fun. You can go a bit crazy with the animations, and that was kind of more me experimenting.

Whereas you've got maybe different clients that have a user base that has different priorities. So there's some good UX rules for scroll animation. I think one of my favorite ones is don't distract from salient information. So don't distract from what people are trying to read. And I try usually to just animate secondary content, like if you've got, say, images that are fading in or if you've got a little SVG illustrated graphic, but not everything. And I think that was definitely a bit of a trend a while back. As you scroll down the page, like everything fades in, and they've actually done user research on that.

[00:20:25] The Nielsen Norman Group did some research, and they found out that some users couldn't differentiate between slow loading times and animations. They were looking at very animated sites with lots of entrance animations, and they were saying, oh, it's just really slow. It takes ages to load because the average user doesn't understand the difference. We think of it as a really obvious difference, but it's not really.

00:20:47 - Anthony Campolo

A common thing you'll hear is that you want to give the ability to reduce motion or stop motion entirely. So do you build in like escape hatches for your animations, or is that something that you leave up to the user's OS? Like, where does that come in?

00:21:03 - Cassie Evans

I think that in an ideal world, you should manage that on your side, but you should also give an option. So you can check for prefers-reduced-motion, a media query you can check for, like an operating system preference that people would have on their machine. And then you can choose to reduce animations.

But it's also really good to provide a toggle so that if you've got an animated experience and someone doesn't have the operating system preference set, then they can just toggle the animations off. Obviously that takes extra time and it has to be signed off if you work for an agency by people who are managing your time. So it's always difficult.

But I try to kind of build prefers-reduced-motion options in from the beginning. That's what you should always do. And then the toggle is like, if you have time to do that, then that's a great additional option in the GreenSock world as well. So in JavaScript you can also check for prefers-reduced-motion, and then you can either return out of the function that has the animations in or kind of wrap your animations up in like a little if statement.

[00:22:06] And we've also got matchMedia, which is like a ScrollTrigger method. And you can check for prefers-reduced-motion in that, and you can segregate your scroll timelines. So you can create a limited scroll timeline for reduced motion, and then a kind of more animated one.

00:22:24 - Christopher Burns

There's a lot of information there. It's so complicated because you speak about things like, okay, so there's a toggle to stop reduced motion. Where do you toggle it? Well, you need to toggle it in probably JavaScript, but then you need to make sure that the CSS is doing the same thing because there's loads of extra queries now, isn't there? Like preferred dark mode, light mode, no motion. I think no motion is one of them as well.

As you were saying about working in agency, it's a fine balance of you want to please everyone, but sometimes when people are managing your time, they're not going to think about the less able-bodied. So that's why I think it's great that if the frameworks can make it easier so that it just is built in from the start. We're now starting to see with light mode and dark mode in a lot of component libraries. It's just built in so you don't have to worry about it. I think it will go really far.

One of the other things that I did want to ask about.

[00:23:22] You have a little CodeSandbox of an animation of you. Obviously it's animated with GSAP. I really want to talk through the steps because I think it's quite easy to just look at that and be really intimidated. Like, how would I do that in your CodeSandbox? You have the code, but where do you even start? Do you start in Illustrator or an SVG tool and just design it, and then you move it into code to then start animating it?

00:23:52 - Cassie Evans

Yeah, pretty much starting out in Illustrator, making sure that you name all of your layers and having a plan for how you want to animate it so that you know to group things correctly and label things correctly, because otherwise you end up going backwards and forwards quite a lot, which can be a little bit stressful. And then, yeah, I'd move it into somewhere like CodePen or CodeSandbox and then play around.

00:24:17 - Christopher Burns

I guess if you're not a whiz with Adobe Illustrator straight away you can just animate anything with GSAP. So you could potentially just pull any SVG off the internet and just start animating it if you wanted to.

00:24:31 - Cassie Evans

Yeah, definitely. So you could animate any SVG or HTML or canvas, as I said, like absolutely anything.

00:24:39 - Christopher Burns

You've done quite a few talks. I saw that you're going to be going to San Francisco to do a conference. Do you have any you would really recommend watching or listening to to really understand this? Because we've had this conversation, we've tried to explain it all as best as we can, but there will still be things like, how do I do that? What do I do? What do I watch? Where do I get started with it all?

00:25:03 - Cassie Evans

If you want to get started with GreenSock, I'm currently revamping the Getting Started guide on the GreenSock website, so hopefully in a few weeks' time we'll have a brand-new Getting Started article that's kind of agnostic to what you would be using it for, so not necessarily focused on SVG.

If you're interested in getting started with SVG animation, I obviously have a bunch of talks. So look up my talks. But also I run a workshop as well. So I run a workshop which teaches you absolutely everything that you need to know about animating SVG with CSS and GreenSock.

00:25:42 - Anthony Campolo

And is that what you would recommend for someone who has literally never done any animation? That's kind of the best, like, ground zero to start with?

00:25:49 - Cassie Evans

Yeah, I definitely recommend it. We get a lot of people from lots of different areas. So the last workshop, we had a backend programmer who had never actually used JavaScript before, and we also had an illustrator who had never used JavaScript before. So it was really interesting to kind of watch everyone coming at things from different perspectives and all ending up with wonderful animations at the end of the day.

00:26:11 - Christopher Burns

Would you say that animating on the web is, I wouldn't want to say a dying thing, or would you say it's a thing that still has so much room to grow, it's just not truly caught on yet, if that makes sense?

00:26:27 - Cassie Evans

I think you're in a very different world from me, because from what I see, there's lots of animation on the web and it's becoming more and more popular nowadays. There's so many different ways to animate on the web.

00:26:37 - Christopher Burns

It's not necessarily a different world because I completely agree, but I think my world is so surrounded by functional programming in JavaScript. When you speak to someone who doesn't do functional programming in JavaScript, it's a very different world.

Like we're saying, and one of our goals for our second year of freedom is to be like, let's talk about the other cool things that are happening in the JavaScript world. Let's get people on to talk about Vue and all these other things. And it's great to think about what else JavaScript can do, because it's a very strong language.

00:27:11 - Anthony Campolo

I was curious about Svelte, actually, because I know Svelte was created partly for animation, specifically because Rich, working at the New York Times, has lots and lots of graphics work. So where does Svelte come in? Do you have much experience doing, like, Svelte animation? And am I right that that's kind of a good optimized framework for that?

00:27:29 - Cassie Evans

Yeah. Svelte makes things a lot easier to do animation than React does, definitely. But I mean, I think that people lean too heavily on frameworks. And I think for a lot of the time, if you are creating a jazzy landing page that's got loads of animations on and stuff, it's a different way of approaching a website. Like, you don't necessarily need a framework.

You need good tools to help you with animation. You need to have a good understanding of how, say, WebGL or shaders or SVG work, but you don't necessarily need a framework to do that. Vanilla JavaScript can be just enough.

00:28:06 - Christopher Burns

And I think a lot of people like me, you know, I'm going to build a landing page website, I know what the best tool is, Next.js, because that's obviously what that was built for when Eleventy is supposedly pretty good. It's just that thing. It's like, but what about my React? I'm so used to React I can't code with a standard HTML anymore. I wouldn't even know where to start. Obviously I do, but you get so used to the tools you're using.

I feel like, yeah, we talk about this thing, as you said earlier, of like GSAP is the most popular animation framework. React is the most popular layout framework, view framework, and people put them together and it just doesn't go well. But there's that thing of knowing the right tool for the right moment. And React, the more I look at it, the more I actually try other things, the more I think this is pretty overkill for a lot of things we're using it for. But when you're a hammer, everything looks like a nail.

[00:29:04] And I think React, that's the perfect analogy for it. It's like I can just do everything in React. As I said, I kind of worded my question wrong. Is this area dying or growing? What I mean is, in my mind, that we all skip the gun to go to React and now use React for everything, and this awesome, cool way of, you know, animating things just kind of got sidelined. And now we're seeing actually, if you pair it with Vue or Svelte, then it shows its potential. So much easier is what I'm actually trying to say. I don't want to seem like I'm raining on anyone's parade.

00:29:38 - Cassie Evans

I think that you are. You're right in that. I think a lot of bootcamps nowadays, they just focus on the kind of more back of the front end side of things. And I think that it is potentially, this is quite a cynical view, but design and animation and interaction and UX and all the more kind of human side of things, they're very feminized. Because of that, they're devalued and people jump over them.

And you see in bootcamps, people will be like, don't worry about CSS too much. Maybe just study it for a day or two, and that will give you the basics, and then you can carry on with JavaScript frameworks. And people skip over the kind of deep dive into all of these things. Like they don't look deeply into SVG, they don't look deeply into CSS, they don't look deeply into animation libraries and interactions and stuff. And that's the craft side of it.

You mentioned that word when you were talking about my website, which is lovely because that's what I aim to do, is make websites feel a little bit more human and a bit more crafted. And my website isn't using any big JavaScript frameworks.

[00:30:41] People have asked me, what framework are you using for that? And I'm like, I'm not. It's just vanilla JavaScript.

00:30:47 - Anthony Campolo

I was getting lots of flashbacks of my own bootcamp experience throughout the course of this conversation, because you're 100% right that we spent about a week on HTML and then like two weeks on CSS and then, you know, nine months on JavaScript and React and all that stuff.

And for me, I really was struggling a lot in my bootcamp just to get anything to work at all. So I know that I did very much skip over any of the visual aesthetic stuff, any of the craft, any of the more human element of it, because I was like, my website is broken. I can't even click a button and make it do the thing I wanted to do.

But now, as I've gotten more experience and I've gotten better at the back of the front end, and I can make websites that function. Now it's like I don't have an excuse anymore. I can't say, you know, I still need to like, learn all this other stuff. So I think you eventually get to a point where if you want to be able to create a website that is holistic and that is human and expresses the things you want to actually express, you can't just think about the functionality.

[00:31:52] You need to think about all these other higher level things. And this podcast, we've even been guilty of not focusing very much on the front of the front end. And this is why we've wanted to bring people on who are experts in this. So we very much appreciate your expertise here. I learned so much in this conversation and really appreciate getting to learn about these aspects of the stack that we have neglected through the show.

00:32:15 - Christopher Burns

I want to hold up my hand and say that before, as a JavaScript developer, I worked at an agency and I was a PHP developer, and I remember doing some animation in PHP. There was nothing wrong with it. I enjoyed it, but I think the biggest problem that I see right now in terms of we've not really realized it yet, but we're seeing it, is that everything we're building is also functional. It's so clinical.

For example, we look at things like Tailwind UI, Chakra UI. These are amazing things. You know, a button, a landing page, a thing. But it's so, and I hate to say the word clinical, as in like everything looks the same. I still think there's 100% places and there'll forever be places for agencies, you know, that really make bespoke websites, because as you know, there's so much thought that goes into it. When I worked in an agency, I didn't just load up a component library and chuck every component on the page and chuck the text in.

[00:33:17] The designs came to me as an Illustrator file. You'd pull out all the SVGs and stuff that you needed for the website. You'd place them on the page. This was like five years ago, and probably everyone uses Framer now and no longer Illustrator, but I think there's still 100% a place for that.

And I think we kind of, like I said, skip the gun by going with React for everything, and this artistry kind of feels like it's been lost for a bit, and I feel like it's definitely been lost on me. I've completely forgotten how to make beautiful websites.

Like, for example, I always want my own company to have the most beautifulest website ever. I think I can make the most beautifulest website ever. And then I think, I don't think I have the creative capability to think outside the box to craft such a website anymore, because I'm too deep into it, because it's much more about art to me than I think about functional web design. As in, it is art at the end of the day, but a different form of it, definitely.

00:34:17 - Cassie Evans

I think hopefully what we'll be able to do by making GSAP a bit more accessible in a React world is open that up for other people.

00:34:26 - Christopher Burns

I can't wait. I really need to give some of these demos a go because I really want to get into it and relearn it, because it's such a cool thing. To me, it's one of the last things on the internet that truly wows me. Hardly anything truly wows me on the internet anymore. I've seen Node run in the browser. Now that's not wow. But animation still feels like there's craft to it, and I really respect it.

I think that's it. Where can our listeners find you, get hold of you, get the links to the workshop, for example?

00:34:57 - Cassie Evans

So I'm Cassie Codes pretty much everywhere. And you can find my website at cassie.codes and Twitter @cassiecodes. Yeah.

00:35:06 - Christopher Burns

And I've just remembered you also have done some live streams with Front End Haus. We've had Alex on the show quite recently. We'll make sure we have links to them as well.

00:35:18 - Cassie Evans

Yeah, definitely. He's a good lad. Front End Haus is wonderful. I think that he's doing a lot for creative coding and web animation, leaning into the front of the front end space.

00:35:28 - Christopher Burns

Yeah, I think that's everything.

00:35:30 - Cassie Evans

Awesome.

00:36:01 - Christopher Burns

Are you happy, Anthony?

00:36:02 - Anthony Campolo

Yeah. Oh, yeah. No, that was great. By the way, you keep saying this term, skip the gun. The expression is jump the gun.

00:36:10 - Cassie Evans

Skip the gun.

00:36:12 - Christopher Burns

Wow.

00:36:13 - Anthony Campolo

You said it like three or four times on different episodes.

00:36:18 - Christopher Burns

Look, it's probably like a local colloquialism to where I'm from, and I've never noticed it or something, because that happens, you know.