We got to talk specifically about the Greensock 3.8 release and an SVG workshop she’s got ready to that she does with the gang at Pland.
Retool for StartupsSponsor:
After working with thousands of startups, we’ve noticed that technical founders spend a ton of time building internal tools—which means less time on their core product. So, we built Retool For Startups—a program that gives early-stage founders free access to a lot of the software you need for great internal tooling.
The goal is to make it 10x faster to build the admin panels, CRUD apps, and dashboards that most early stage teams need. We’ve bundled together a year of free access to Retool with over $160,000 in discounts to save you money while building with software commonly connected to internal tools like AWS, MongoDB, Brex, and Segment.
We give you a head start with pre-built UI components, integrations, and other advanced features that make building from scratch much faster. To learn more, check out our site, apply, join webinars and much more at retool.com/startups.
[Radio channel adjustment]
Announcer: Today, on CodePen Radio.
Chris Coyier: Hello, everybody! Time for another CodePen Radio, #336 where we're doing my favorite thing to do, which is talk to somebody that's kind of from the CodePen community about their work, their life - everything. This is a particularly unique opportunity, as you'll see in a minute.
I have Cassie Evans here. Hey, Cassie.
Cassie Evans: Hello! It's so lovely to be here. This is awesome.
Chris: Well, thank you. The pleasure is all mine, I assure you.
Cassie, your website is cassie.codes, which I would send everybody to right away just because it's just a beautiful specimen of a website - period. It exemplifies a lot of what you do, at least professionally, how people think of you. I think I've heard you say this is kind of your happy place is animation and particularly SVG-related animation. That's where you spend a lot of your time, yeah?
Cassie: Yeah, definitely. I think I came into the Web from a design world, so when I started learning how to code, a lot of the tutorials were a little bit too abstract for me. Then when I found SVG, I was like, "Wait! So, you're telling me I can create a thing in a graphics editor, then export it, and then mess around with it in code?" That's design and code together. It was, yeah, just very exciting.
Chris: Yeah. Yeah, I'm not nearly as good at it as you, but I feel the same way, I think, of how satisfying of a format SVG can be. We know these tools that you might already know, if you come from something of a design background like Adobe Illustrator, but these days there are more options than that, but that was such a big player for so long. Then you're used to using the pen tool and just living in the world of vector. It just so happens that the Web speaks those same languages? What?!
Cassie: Yeah, it's super exciting.
You did a bunch of that stuff. I think, when I first heard of you - or whatever - it was during your time at Clearleft, which I'm sure was great. It seems like this cool crew over there. Then, more recently, jumped over to GreenSock, which makes GSAP (GreenSock Animation Platform), which is pretty cool, too. Tell me what that's all about and what that was like.
Cassie: Yeah. It's a big change from working at Clearleft. Obviously, when I was at Clearleft, I was doing front-end dev, so it was just kind of standard: get tickets, make websites, finish making websites, website works, done. [Laughter]
Cassie: Whereas, my new job covers a whole range of things, so I am tinkering about on CodePen a lot, making lots of demos. I'm also helping out in the forums with other people who are tinkering about on CodePen making demos. [Laughter]
Cassie: And then kind of thinking about the future of GreenSock and helping people learn, writing documentation, making educational videos.
Cassie: It's all very different but it's all the stuff that I really enjoy, so that's really exciting. I'm really having a great time.
Chris: I love that it's possible. The website is greensock.com, and it's been around for a long time, right? I think Jack Doyle -- Jack is probably--
Cassie: Since the Flash days.
Chris: Yeah, and it's awfully powerful. What makes me so happy about GreenSock is its longevity. It's kind of spiritually how I like to roll on the Web too is, like, "We make this product. We're going to make it better and better and better and better over time. We're just going to be here forever," kind of thing.
I've seen, over my career in Web design, these type of frameworks kind of come and go. Somebody will be like, "You know? I'm just really excited about animation right now, so I'm going to make a little library."
It probably has some cool aspects to it, and they're excited about it for two months. The landing page for it is beautiful. Then, two years later, it hasn't been touched. It didn't really get market saturation or anything.
It's not a problem. I don't mind it. It's just that my trust level in them, I've learned, why bother, because [laughter] they just seem to come and go. GreenSock is always there just getting better and better and better.
Chris: Yeah. It allows you to be a business.
Cassie: Yeah. Fueled by the users themselves, which is really good.
Chris: Sure. Maybe we could take that opportunity to dig a little deeper on just that one aspect. I think you're right. I tend to not think about it so much because I guess, in my world, I see so much stuff on CodePen of people just doing stuff. In fact, I think this is still right that a lot or most of the Club GreenSock plugins--
Chris: All? You can use on CodePen and not pay for or be a member of, necessarily. But when you want to take that to the Web, then you've got to join the club. Is that all it takes? You join and then do you have to - I don't know - say what URL you're going to use them on and stuff?
Cassie: No, we don't check any of that stuff. A Club GreenSock membership gives the developer themselves freedom to use the tools on any website that they're working on.
Chris: Okay. A little honor system-y?
Cassie: It's kind of tied to the developer more, but we don't do phone home scripts or check anything. We kind of just trust people and hope that the trust is reciprocated.
Chris: Mm-hmm. Mm-hmm. Then the licensing keeps people honest a little bit, right? If you work for a company of a certain scale, you can't. You can't play loosy-goosy with licensing, right?
Cassie: Yeah, definitely.
Chris: It gives you the license you need. Yeah, nice. Okay. Yeah. Every time we even mention GreenSock on CSS-Tricks, I'll get some kind of comment that's like, "Yeah, but licensing." Somehow, that's locked into people's heads. But if you're just using timeline-y stuff, you're free to do that, right?
Chris: It's just the extra fancy -- what are some of the examples of the ones in Club? I think of the ones that can draw a line. That's a plugin, right?
Cassie: Yeah, so Draw SVG plugin. This is testing my GreenSock knowledge here, but the most popular plugin is Scroll Trigger, and that's free to use for anyone.
Chris: Oh... That's a freebie, Scroll Trigger? Yeah, that one is huge.
Chris: It's relatively new, isn't it?
Cassie: Yeah. Yeah. That's our newest one, but it's the most popular one.
Cassie: Yeah, and then there's Morph SVG, so you can morph SVG shapes. That's a Club bonus.
There's Motion Path plugin. I think that's a freebie. Yeah, there are loads. Split Text, so you can animate text individually. Yeah, I kind of like to think that all the stuff that's behind the Club membership you could do yourself if you were really, really stubborn and you had loads of time.
Cassie: But it just kind of makes things easier for you.
Chris: Sure. Is there a secondary benefit too that you don't load these plugins, like they're not core? So, if you don't need to morph any SVG, you're not paying for that in the cost of the core library itself.
[Guitar music starts]
Chris: This episode is brought to you in part by Retool for Startups, so Retool, retool.com, remarkably good tooling for building admin tools, internal tools, and stuff.
Retool for Startups is a special program that they're offering. This is what they say. After working with thousands of startups, they've noticed that technical founders spend a ton of time building internal tools -- been there -- which means less time on the core products. They built Retool for Startups, a program that gives early-stage founders free access to a lot of the software they need for building great, internal tooling.
The goal is to make it ten times faster to build admin panels, crud apps, and dashboards that most early-stage teams need, so they bundled it together. It's a free year of access to Retool and then $160,000 of discounts for tools like AWS, MongoDB, Brex, Segment - really popular tooling for building any kind of Web software, really. Use your Retool credits to build tools that join product and billing data together into a single customer view, tools that convert manual workflows into fully-featured apps for your team, tools that help non-technical teammates read and write to the database, and so much more.
It's retool.com/startups. That'll get you to the form to apply for this. There is some criteria for it, like you're less than five years old and things like that. Not you as a person - the company. You have to be over five years old as a person, I'm pretty sure.
Check out the site, apply, join webinars - all that stuff. Retool.com/startups.
[Guitar music ends]
Chris: Fantastic. GreenSock, a great animation platform. Been around a long time. The core is free. The plugins are paid.
Then there are releases over time. I remember the release before this one was a really big one. I can't remember all the stuff in it, but it's exciting to always see all the new APIs becoming available. Sometimes the news is extra exciting, like it got smaller or faster or uses some part of the platform more. It really keeps up with the times well.
This happened just again just recently. It looks like September 27th, a big release for GreenSock 3.8.
If you barely care about GreenSock, do you need to care? It seems like the kind of thing that if you're already a super-fan, you care about the point release ones, right?
Cassie: Yeah. [Laughter]
Chris: It's kind of like a little nuance-y kind of stuff. Can we do the feature set just for fun and what people might care about?
Cassie: I think that you're right. There are some things in the point releases that are very niche and only people who are really deep in the GSAP world are going to be excited about them. A good example of that is container animation, which is super exciting if you're really in the GSAP world. But if you're not, it's probably quite difficult to understand.
Chris: This is brand new. It's not like a sub-sub-sub API or anything. It's a brand new, high-level API.
Chris: What does it do?
Cassie: Container Animation: Basically, when people are creating horizontally scrolling sections which animations within them, there's the original way, which was to use scroll trigger and your browser's native horizontal scroll. You can set horizontal true, and then you can trigger animations within that container. So, scroll trigger works for vertical scrolling or for horizontal scrolling.
But what a lot of people do, because we've got the forums, so we sit in the forums, and we see how people are using the tools, and we noticed that a lot of people were trying to create horizontally scrolling sections while you're scrolling down vertically.
Cassie: They were doing that by animating containers along the X-axis on vertical scroll. You can do that with GSAP, but then when you try and trigger animations within that container, it's not actually being scrolled. It's just animating.
Cassie: Yeah. [Laughter] So, we've made a way that people can animate elements within a container that's technically being animated, so it's like nested scroll triggers.
Chris: I see.
Cassie: That's the TLDR is nested scroll triggers.
Chris: I see. You scroll down, let's say, 800 pixels. Then all of a sudden, what used to be a vertical scrolling - I don't know - feeling, all of a sudden is now horizontal scrolling. You'd see this on -- it's just an exotic feeling, right?
Cassie: Yeah. [Laughter]
Chris: You'd do this just for the fancies. I'm sure some people will wave their fists and say, "Don't scroll jack me. I hate every website in the whole universe that does this," but of course, the Web is a big place and you're going to see fancy stuff like this out there. [Laughter] Deal with it, I guess. You know? Sometimes fancy brand sites do stuff like this on purpose to have an experience.
Chris: Personally, I find that's okay. In this case, it was enabling people.
Let's say now I'm horizontal scrolling and I'm four panels deep. I can still count on GSAP APIs to help me even though I'm in a horizontal scrolling context.
Cassie: Yeah, that's it. I mean I agree. I think that all of these -- there are a lot of jazzy animation techniques that you need to be careful about when you are using them and what kind of users are using your website. But there are so many people out there and there are so many websites and there are so many websites that do so many different things that there's always space for whatever type of animation, I think. You do see a lot of, as you say, brand sites, lots of award sites [laughter] that incorporate that kind of technique.
Chris: Yeah. Yeah. That kind of vibe to it. I'm sure there's a whole conversation to be had about doing it accessibly, right? If it's too weird, maybe it even triggers some kind of -- I don't know. My mom gets dizzy, for example, and I don't know what the scientific word for it is, but if I did too much of this stuff on a website--
Cassie: Vestibular disorders.
Chris: Yeah. Okay. That she might prefer not to do that, and maybe there's a way to reduce motion or something. There's lots to talk about there.
Then there's the flipside. It doesn't mean that these brands have to not do it. Right? There are ways to do it responsibly.
I don't know. If Nike knocked on my door and said, "Here's $5 million."
Cassie: [Laughter] Yes.
Chris: "We have this new shoe. It's incredible. It's an antigravity shoe. I need to make a bang with this thing. I want people talking about it. It's got to be just this wow-bang website." I think that deserves an experience that's unusual on the Web. It's not just going to be just some static HTML that says, "Nike released an antigravity shoe," with an anchor link to buy now. It needs pazazz!
Cassie: Yeah, exactly. I mean I've got on my website the blog post section. You can drag all of the cards from my blog post around in little, tiny browser windows. I'm pretty certain that that wouldn't fit on most websites. But on my website, it's really fun. [Laughter] I think it depends. It depends on what you're building - as always.
Chris: That is fantastic. Yeah, and your name animates. Yeah, it turns out your personal website is a playground. You're using GreenSock for some, all of it?
Cassie: Yeah, I'm using GreenSock for a lot of it. Although, I think I made it just before Scroll Trigger came out.
Chris: Oh, funny.
Cassie: Yeah, I should actually go back in and give it a bit of a refactor. I'm terrible for that. Once I make things, it's just like, "Done! Next thing." [Laughter]
Chris: All right, so that's Container Animation, which I like that. It's like we're listening to what our users need, and we're going to give them an API that helps them do the things that they're already doing anyway. I think we can all agree that's how good products are made, as long as they kind of fit within the vision and don't cause too extreme of technical debt and stuff like that. But it's been working for y'all for a good decade or more, I think.
Okay, so we talked about Container Animation. What other APIs do we get in 3.8?
Cassie: Yeah, so we've got a couple of other things. One of them leads on quite well from talking about accessible animations. We've got a property called Fast Scroll End.
Fast Scroll End: We originally put it together with another property called Prevent Overlaps, and it was to prevent animations from overlapping. If you scroll down a page faster than animations are triggered, sometimes you can get one animation playing before the last one is finished.
Chris: That's a good default, probably, right? Most people want their animations to end. [Laughter] Even if--
Cassie: Yeah. [Laughter]
Chris: Yeah. But the overlap is a bummer sometimes.
Cassie: Sometimes it is, yeah. I think if you're triggering certain animations next to certain text sections, you can occasionally hit the next text section and the previous animation is still playing, maybe like a little SVG animation or a supporting animation on the site. If you want to be specific about when animations start and end on scroll, you usually have to either scrub them so that they're linked to the scroll progress or be really careful about how short your animations are. But if you've got long ones and you're scrolling down too fast, occasionally you'll just get these overlaps and it'll look messy.
Cassie: We added these properties just kind of as little bikeshedding things, I guess, to help in really niche situations. But then I was putting together a scroll animations talk at the time, and I was looking into the UX side of scroll animations. There was this really good insight from the Nielsen Norman Group about how people get frustrated if they're task-focused and they're just trying to scroll down quickly to get to a bit of information. It can be really annoying waiting for all the text to gradually ease in if you've got entrance animations.
Chris: Hmm. Yeah.
Cassie: Yeah, and I was like, "Oh, yeah. I've had that before," when you're just trying to find some information. You've got wait for all of the text to ease in, all of the sections to animate in. It's a frustrating one.
Chris: That became a little too hot for a while. Maybe it still is where somebody basically put a star selector in every dang thing on the way down.
Cassie: Yeah. [Laughter]
Chris: It comes in from the left or right or something, and it's a little fancy at first, but you're like, "How is this serving the page exactly again?"
Cassie: Yeah. It can be really, really frustrating, so we've got Fast Scroll End now, and you can detect if a user is scrolling above a certain velocity. If they're scrolling above a certain velocity, you can just say, "Oh, hey. They're in a hurry. End all the animations." It just automatically completes all of the animations if someone is scrolling down fast.
Chris: That's great. What a nice little touch. What I like about something like that, besides for it being UX focused and accessibility focused and it came from your real-world usage and from conversations in the forums. I love that. That's how great products are made, I think. It also feels like something that a native platform will never do. There's no way that there's going to be a spec that says, "Oh, if the user is scrolling fast then move animations to their end state." I could be wrong, but that feels like the thing that's best left to a library that that's how a spec decision would go. Sometimes--
I've seen, more and more. I don't know what the current status of this is, but there's scroll-triggered CSS animations on the way.
Chris: That's cool. Obviously, there's a lot of interest in this, triggering some kind of animation or transition when I get to a certain point on the page. I think it's kind of great that the platform is picking that up. But whatever APIs we're going to get for that, it's going to be 5% of whatever GreenSock gives us, right?
Cassie: Yeah. I still find it really exciting, though, the CSS scroll linked animation spec. I forget what his username is, but Bramas on Twitter. Yeah, I can't remember what his username is exactly, but he is doing loads of really cool demos at the moment using the scroll-linked animations. Although it is experimental, so it's behind a flag at the moment. [Laughter]
Cassie: You have to enable that to see anything that he's making. But, yeah, he's doing a great job.
Chris: Yeah. I know what you mean. Yeah, it's just nice to see stuff like that come to the platform. CSS is just on a tear lately with stuff like that. But there are limits to what it's ever going to be willing to do.
Cassie: Yeah, definitely. I think it's going to be really useful for simple animations, but then obviously, if you're animating a whole load of things on scroll, then reaching for something that has a little bit more control like Scroll Trigger is going to be best.
Chris: Yeah. You've got to wonder what will eventually make it. In a way, I'm interested but don't really care how GreenSock works deep in the internals. Do they use the Web animation API? Oh, I don't know. Maybe. [Laughter] Is it too early for that? That's kind of like your business. I almost prefer not to know.
Like, I don't know. Whatever they do, it's the best choice, I'm sure. You know? [Laughter]
I have on my little list, a little demo to make for a thing where you just scroll down the page and there's a video element. When you can see it, the video plays once and that's it. I saw it on a website, and I'm like, it's simple; it's a good excuse to use Intersection Observer. How interesting. I don't even need a framework for this.
But then I wondered, "But do I?" Is it too complicated? Would GreenSock make it easier? Tell me about IsInViewport. Is it related to what I'm talking about there or is it kind of different?
Cassie: Yeah. Intersection Observer is a lot like IsInViewport. Intersection Observer is very good to know when something is entering the view, but we didn't actually have that as an option with Scroll Trigger. Scroll Trigger does a lot of other stuff, but we didn't have that one particular little option there, so we thought that we'd add that in. It's basically our Intersection Observer within Scroll Trigger.
Chris: Oh, nice.
Cassie: Then in addition to that, we've got the PositionInViewport, which is something that Intersection Observer doesn't do. You can detect exactly where the element is in view, so you could say, "Trigger an animation when it hits exactly halfway into view."
Chris: Oh, half. Yeah. That seems relevant to me, right? If I stick with my movie example, at what point would you decide to hit play? Is it when the bottom edge of the movie hits the bottom edge of the top of your browser? That way, by the time it's visible at all, it's already playing? Or is that too soon because then maybe the movie is playing too early and you miss some of it? You could wait until it's entirely fully visible to play or when the top edge hits the top edge? You know?
I don't know what the right answer is, but the point is the API supports it. Whatever you decide the right answer is, now you can do it.
Cassie: Yeah, definitely. I think you can do quite a lot of stuff like that with Intersection Observer already. It's just a little bit more complicated, a little bit more clunky, and you might have to do a little bit of math yourself.
Cassie: That's the thing with Scroll Trigger is it just makes everything a lot easier.
Chris: I think that's generous. Every time I reach for that API, I'm like, "Whoof." You know?
Cassie: Yeah. [Laughter]
Chris: I love that it's off thread. I like everything is possible. But there's something about it that feels -- I don't know if clunky is the right word, but it's low-level.
Chris: You've got to know what you're doing.
Cassie: I feel like I have to relearn it every time I use it, and I've used it quite a lot. That for me is a sign of-- [laughter]
Cassie: --potential clunkiness.
Chris: People even say that if you write less CSS, some things about Grid, Flexbox, and stuff. It doesn't feel as natural to people and they're constantly looking stuff up on that one. Maybe that's the same kind of vibe. Maybe the API isn't as good as it should be if, every time, you have to look it up.
Then there's just one last one, something about snapping.
Cassie: Oh, yes. Directional Snapping, that's very deep in the weeds. That's just down to which direction things snapped in before. Now it's a little bit more intuitive. It will always go in the direction that the user last scrolled in.
Chris: Yeah. Yeah, you can't just ship a fix real easy, too. You kind of don't want to break it, to begin with. Yeah. I think that's related to CSS as well with all the scroll snap stuff.
That makes me think of what would happen if you tried to build a GSAP powered snapping thing. But then you also put CSS scroll snap stuff on it. Would they fight or is GSAP smart enough to be like, "I'm going to turn that off because you're trying to use me"?
Cassie: You can use CSS scroll snapping with GSAP, but not GSAP snapping and CSS scroll snapping together because that would break.
Cassie: But you can. There are some demos that we have in our Scroll Trigger showcase that are using CSS scroll snapping.
Chris: Oh, nice. Yeah, it's kind of like leave it to one technology or the other for certain things.
Chris: Yeah. All right. Cool. Obviously, you know a lot about what's going on with SVG and animation and GreenSock and all that stuff. Fortunately, for everybody else out there, if you wish you knew what Cassie knew, you can do that, right? You have a brand new workshop you put together.
Cassie: Yeah. Yeah, I actually put it together right before COVID kind of all went down. I did a few in-person workshops and then got resigned to my tiny flat [laughter] and couldn't do in-person anymore. I did a few online ones with Smashing Mag, and that was really lovely.
Then recently, I've just started running them with the Pland crew who are just starting out doing workshops. I think their tagline is "Take the work out of workshops," and they're very, very good at doing that.
Chris: That's a nice tag.
Cassie: That's been really great because I've been able to kind of control the pricing myself, so I've been able to do parity pricing and let people along who maybe couldn't have afforded the workshops before. That's been really good.
Chris: Nice. It looks like it's Pland like with no E, plandonline.com. I don't know. Check them out or reach out. It sounds like they're getting started, too, with helping out with workshops, so that's pretty cool. Maybe they'll be in-person again.
Cassie: Yeah. I'd really love that.
Chris: Yeah. [Laughter] Me too. Pretty sweet. Yeah, thanks for joining me. Cassie, you are cassie-codes on CodePen and the website is cassie.codes. That's a pretty sweet TLD. I didn't think of that. Good choice.
Cassie: Yes. [Laughter]
Chris: More people should have .codes URLs. Is there anything else you want people to know or places they can find you online?
Cassie: I am mostly found in the GSAP forums nowadays.
Cassie: If you want to hang out, I'm in there all the time.
Chris: What a cool success story for forums. You know? If you want help with GreenSock, go there because they are anything but abandoned. They are hopping over there, aren't they?
Cassie: Yeah. I really love it. It's so friendly. It feels like Stack Overflow but with nice people. [Laughter] Yeah, I think that a great thing about it is that if you Google a particular problem, you can find it.
Cassie: The forums pop up. They've got SEO, whereas I think a lot of Discord communities and Stack communities are just black holes. It's quite nice to have forums.
Chris: You kind of built your own SEO in that way, which I think that's the product reason to go with forums. It sounds so desirable to have basically community-created SEO content.
Chris: But that's hard to pull off, right? Basically, you need full-time employees.
Cassie: Yeah, definitely.
Chris: Guess what GreenSock has.
Chris: [Laughter] All right. Well, thanks again for joining me. It was a pleasure to talk. Everybody, check out GreenSock and get animating. Play with them plugins on CodePen.
Cassie: Awesome. Thank you for having me.
Chris: See ya!
[Radio channel adjustment]