Keep Scrolling

Hi, folks! Thanks so much for joining me today for this talk and thank you, JS Nation, for having me. So first off, before we get started, there's a lot of motion in this talk, so if you have vestibular issues, just go ahead and skip this and make yourself a cup of tea or something!

So hi, I'm Cassie. I'm a creative developer. I've got a lot of love for SVG and web animation. I really like to bring a little bit of fun and whimsy into everything that I create on the web, and I really love teaching people that as well. Teaching people about the best ways to animate on the web and how to animate performantly.

So today, we're going to be chatting about scroll animations. I'm going to share some notes and some pointers, both from a UX and a code perspective because they're both equally as important. So scroll animations. This can be a contentious topic with web folks. It's a bit like Marmite, some people love them and some people hate them. And that's because they can be very impactful and really great if they're done properly, but there is really nothing worse than going to a site to quickly look up some information and getting your scroll hijacked or not being able to read the content that you're trying to read because it's fading in and animating as you're scrolling down.

So badly implemented scroll animations, they can be really bad for performance. They can be distracting and they can sometimes even be a little bit nauseating for people with vestibular disorders. With that in mind, I'm going to start this talk with a motion design principle. It's a little UX takeaway to keep in mind while you're animating. After all with great power comes great responsibility. So that motion design principle is do not distract from salient information. The web is, after all, primarily an information system. It's a place to distribute and share knowledge. It's also a place to look at pictures of cats and shout at people who use different frameworks than you do. But it's important that whether the user is after information or pictures of cats that we don't get in their way. So TLDR, not everything needs to animate on scroll.

So scroll animations run the gamut from small, useful UI interactions to big, immersive storytelling or scrollytelling experiences. But they all have one thing in common. Good animation supports or adds to the content. It has purpose. So what are some good purposes for scroll animation? A good one is to provide visual feedback. Sometimes animation can provide information visually or additional information that can be hard to convey with words. So this is quite a common use case and a great little example from my pal Louis.

The bar at the top fills up with colour as you scroll to show you how far down the page you are. So this is a really useful interaction for blog posts or articles and it would be really complicated to try and explain to someone with words how far they are down the page. So sometimes this extra information might be more complex. It might take the form of illustrations or even interactive data bits in interactive storytelling.

And you can also use scroll-triggered animations to provide direction and intent. So you can use animations to guide a user down a page. Scroll-triggered animations can provide visual interest and keep people's attention. This is one of my all-time favorite scroll animations. It's just such a well-executed concept. And it's worth pointing out for this example, without the illustrative accent on the page, it would just be a long page of stats, which people might lose interest in quite quickly, depending on whether they're interested in stats or not. But animation can help keep people engaged. And because scroll involves user interaction, when it's done right, it can be really immersive and fun.

So I really love these scroll-triggered masks. They make the website feel almost gamified, kind of like you're hunting out and uncovering bits of the website. Especially love the footer, which is coming up in a second. So those are a few examples. I guess now we'll delve into how. So how do we trigger animations on scroll? A little dog break.

So first up is an exciting upcoming CSS spec, scroll timeline. So this spec from what I've seen looks like it'll be really great for simple animations like that progress bar that I showed. So you start off by defining your keyframes as usual in a keyframes block. And then after that you define a scroll timeline. You include a time range in this and I found this a little bit confusing when I first saw it. So a one second isn't a number range, it maps the scroll progress to the animation progress. So it's representative of how much animation time should pass when we scroll from start to finish in the container. So one second maps to 100% progress from start to finish. So a 1-100% map. If you only wanted half of the animation to progress for a full scroll, you'd say 0.5. And then lastly, we reference the keyframes on the element and then set scroll timeline as the driver for the animation. So it's the last line here that's kind of where all of the magic is happening.

So this is really exciting, and I really like a simple CSS solution for small animations. But it is mega-experimental right now. It's behind a flag in Chrome at the moment, so you can try it out and play around with it, but you can't use it on production sites yet.

So what else? How else can we accomplish scroll animations? In JavaScript land, which is what everyone is here for, we have the intersection observer API. So I'm not going to dig into this in detail. It could be a whole talk all in itself. But its strength is in its name. So it's really useful if you need to observe an element and see when it is in view. So for instance, it's very useful for stuff like lazy loading an image or toggling a CSS class on and off as something gets into view and leaves again.

So every time I've used it, which has been, you know, considerable amounts of time in between, I've had to learn the syntax from scratch, and I have found it a bit confusing. So Michelle Barker made this really handy GUI, which I've just bookmarked now for every time I use it. You can tweak these values here so you get a visual representation of root margin and threshold, which is super handy. But what if you have more complex animations? What if you want to trigger more involved sequence scroll animations or have more control and flexibility about whether they play one way or reverse or reset? How would we do that kind of thing?

So this is where Scroll Trigger comes in. Scroll Trigger is a plugin from GreenSuck that gives you a truly ridiculous amount of control over scroll animations. So if you haven't used GreenSuck before, it's a super powerful JavaScript animation library. It's used by tons of websites all over the web and it allows you to animate pretty much anything. So HTML, Canvas, three.js, SVG, you can whiz everything about. You can also sequence animations on timelines, which is incredibly important for more complex animations. So I've been a huge GreenSuck advocate for quite a while, both in the sites that I've made myself and in the workshops that I've taught on SVG animation. Mainly because of the standout work that they put in to make sure that SVG animations behave consistently across browser. So this is actually my first talk that I've done since starting to work for GreenSuck. And I used to preface all of my enthusing with, they're not paying me to say this. But well, I work there now. So as you can't take me at my word anymore, I'll stop talking and we can dig into some code. So right here, let's open up this code pen. We have an image with a logo in, and here we've got a little GreenSuck tween. We've got scroll trigger loaded up as well when we want to use it. So you can think of a tween as kind of the powerhouse of GreenSuck animation. It's like a high performance property manipulator. So this is really nice and simple.

We're saying, hey GreenSuck, can you rotate the logo 360 degrees? And this is great, but you know, what if it was off screen? By the time we get down to it, unless we scroll really fast, the animation will have stopped playing. It'll just animate right away.

So in order to animate this when it's in view, we add a scroll trigger. So I've got in the JavaScript panel, I'm loading in GreenSuck and scroll trigger here. And then registering the plugin. So in order to add scroll trigger to our animation, we just have to say what our trigger element is. So this is saying start the scrolling, start the animation once the logo enters the viewport. So if we scroll down now, you can see that it starts when we have scrolled down to it.

That's really cool, but it's also quite simple, we definitely want more control than this. So we're going to configure scroll trigger by passing in an object instead. We still want the trigger to be the logo element, so we'll put that in there. But we could pass in any element, we could have any element as the trigger. We're going to also set markers to true, so that we can see where the starts and endpoints are. And you can see this has just added markers to the page. And as we scroll down, we can see that as the start trigger hit the start marker here, the animation plays.

Now this is already starting a little bit too low down, so we can change this by changing where the start position of the marker is. And this is really intuitive to change. We can just use words or percentages or relative values. So we could say start when the top of the logo hits 60% of the way down from the top of the viewport. So you see that the start marker has changed. It's now 60% of the way down from the top of the viewport. And as we scroll, it hits and animates. Let's change the end value to be when the bottom hits 40% of the way down from the top of the viewport. So you can see the end value has changed here. You can also see that the end position isn't really affecting much now. But if we add scrubbing in, the animation duration will map to the scroll distance. So we're going to say, scrub true. And now when it refreshes, you'll see that it scrubs the animation for that distance and then stops. And will replay as you scroll down. So we can also even add a duration value to scrub so that the animation takes a little bit of time to catch up with the scrolling.

Again this is really intuitive. So we're just saying one second. And this will take a little bit of time to catch up, which makes things feel a little bit smoother. Makes it feel like it's got an ease applied to it.

So another strength of scroll trigger is the really solid callback system. So you can see the events firing here. We're changing the text in these functions. I'll pop this open. So we've got an onEnter function, onLeave, onEnterBack and onLeaveBack. And we're just changing the text. So you can see these firing as we leave and enter back.

And you can also adjust how the animation is handled on these events by using toggle actions. So if we add a little animation in here, so we're going to rotate the box again, like we did last time. And then we've got this line here called toggle actions. And this is saying, play the animation when we enter. When we leave, pause the animation. When we enter back again, resume it. And then reset when we leave back again. So you can see as this plays, we'll pause there. We're going to resume when we enter back and then reset on leave back. And you can change these to whatever words you want, within the constraints of the words that we've given you, obviously. So we could say reverse instead of resume. And then you'll see it spins around to the right or spin around to the left on the way down because the animation is in reverse. So this is really handy for scroll animations. It gives you a lot of control.

You can also pin elements with ScrollTrigger. There's PinTrue. There's also PinSpacing so you can choose whether there is spacing added to your elements underneath that stops things from layering on top of each other. In this example, we've got some layered Pinning going on, so there's no PinSpacing and these slides are just scrolling right over the top of each other and pinning, so this is really powerful stuff. You can kind of set up your animations pretty much any way that you would like.

And, most importantly, ScrollTrigger works with the browser's native scrolling behavior, so it doesn't scroll Jack at all and it will integrate seamlessly with native scrolling on all devices. And it's also mega performant, so scroll events fire a lot and handled badly, scroll animations can turn your laptop into a cozy hot water bottle really quickly, so ScrollTrigger gets around this by pre-calculating start and end positions and then it compares those to the scroll position. So it's not constantly checking in with objects, bounding boxes while you're scrolling.

So if you'd like to have a little look at some creative inspiration, we have a showcase on CodePen, which I've popped a little link to here. There's all sorts of amazing examples in the showcase. This is one of my favorites. And if you make something really awesome then we'll add yours to the showcase as well. So that's a little bit of inspiration for you. And you can also check out the docs on GreenSock, on GreenSock's site. The docs are full of videos and CodePens and information, all sorts of good stuff. So if you get stuck, we also have really great forums. They're like a friendly version of Stack Overflow, so someone will be able to help you.

So if you have any questions I'm going to be kicking about in the chat. Come and say hi and thank you so much for having me and enjoy the rest of the conference. That was an amazing talk. I really enjoyed it, I hope you did too. So can you drop a big round of applause emojis over in the chat? But we have so many questions. We have some questions that came in and also what we're going to do as well is not just take the questions that you have for Cassie, we're also going to look at the answers that you have for Cassie to the question that she asked, and she asked, when we, they asked when we can travel again, where do you want to go? And let's take a look at the results. We can see Japan and I'm not going to lie, I put Japan as well. That's one of my favorites. I'm super excited. Cassie, what do you think about the answers? Um, yeah. I, I mean, I would go to Japan. Definitely. That's one of my favorite places to go to, um, Disneyland. Honestly, I put Disneyland as well. Me and my friend might actually, especially if you seem the new, um, Avengers, Oh, is it called the Avengers campus? That's what it's called. Oh, that's so good. The whole section, just, yeah, I'm a Marble fan. Let's not go into it.

I like Iceland as well. Iceland is my favorite place. I went there for my 30th. Um, I just got like a little log cabin. It was the best thing in the whole world.

Oh, that's so nice. That sounds so cool. Like a great holiday.

I love the ambition of some of the people in this chat, the moon. All right. And I honestly, I'd be pretty cool. If you could go, if you had a free trip to go to the moon, would you go? Um, if Elon was organizing it probably not. Don't trust that lad.

I don't blame you. I don't blame you. Well, maybe you could do a Bezos and get yourself a ticket to space. We can talk about that at some other time, but honestly, I really enjoyed your talk learning about scrolling. And I think it's one of those things as well. There's a lot of things that we as sort of developers, we sometimes take for granted about how complex it can get. I love when someone says that, um, that like, um, what's it called again? CSS, just as an example, it's kind of like an ocean where, yeah, you can just paddle over by the shore. But the deeper you go, there's so much depth to it. And I know it's interesting to kind of learn this, but we've had a few questions come in. So I'm just going to go through them and let you answer them.

So one of them is from Bartos and it says that if scroll timeline is available and the animation is simple enough to be fully supported by it, would GreenSock use CSS for improved performance or would it still use scripting implementation? So I guess this is multi-layered question because, um, GreenSock does use CSS. So GreenSock uses CSS transforms. Um, it just influences the, um, you know, the value of those transforms using JavaScript. Um, so it is leveraging stuff that is already there in the platform. Um, I don't think that GreenSock would take advantage of scroll timeline because we do things in a quite like slightly different way. Um, but yeah. So I think like if you have a simple animation that you can do with scroll timeline in the future, then probably that would be the best use case for it.

Yeah. I find it very interesting. One thing about CSS is they're often different ways to achieve the same effect. And I, and I think this is where that GreenSock says, okay, we're going to kind of handle a lot of things behind, so you don't need to worry about which way I'm trying to do it. So that's really cool.

Kevlar actually asked a very, I think an important question. They said the scrolling animation's really impressive. So they love them, but do you see any downsides for accessibility? Um, well, there, there are always trade-offs, I think, um, when you are animating things. Um, and I think that the best way to approach animation is think about what the purpose of the site is. So if the purpose of the site, um, is getting content across to people, like if it's a serious content driven site and you really need to worry about accessibility. Say it's a university website and you've got to worry about people like signing up for like gov.uk, then you probably don't need animation. Um, if you're kind of more focused on the visual side of things, then animate, but animate responsibly, like have prefers, reduced motion, fallbacks and stuff. Um, the, the only, like one of the big issues, um, with animation is not providing prefers reduced motion fallbacks. So if you've got that covered, like a lot of, a lot of the kind of issues are sorted. That's my new CSS quote, animate, but animate responsibly. You should put that on a t-shirt, honestly.

Um, and we have another one from Elvara, uh, who says, how would you go about an auto-scrolling animation? Auto-scrolling animation. Oh, scrolling. Yeah. Yeah. Auto. So if you're just talking about an animation that's advancing and looks like it's scrolling, but isn't tapping into the native scroll, then you'd just be looking at looping a timeline. So you'd create a timeline animation and then you'd loop it. Um, a lot of, this is a thing that I see quite a lot is, um, people thinking that animations are scrolling when they're scrolling. When they're not scrolling, they just are moving in a similar momentum, but scrolling animations, when I'm talking about that, that's using the browser's native scroll. So, yeah. That makes sense. One thing which I find super interesting and, you know, honestly, like a lot of CSS developers, they're artists as well. They're not just developers. They're able to sort of make illusions like you've said, where you think it's scrolling.

And then the actual native scroll is just not happening, but they're just so talented at that. I have a question of my own. Does scroll trigger do smooth scrolling? So smooth scrolling at the moment, most people are implementing that with a mixture of locomotive scroll, which is another third party library and scroll trigger. Because when scroll trigger was made, first of all, it was made to not do scroll jacking at all. It was just kind of layered on top of native scroll. And it's kind of turned out that there is quite a lot of demand for smooth scrolling. So we are currently looking into creating our own smooth scrolling feature within scroll trigger, but it will work just on top of native scroll. It won't do scroll jacking.

Nice. Nice. And this is a question which has just come in and it's kind of your opinion on sort of animation just across the web and according to you, what role should it play in web dev? Like you just spoke about how people should animate but animate responsibly is like they're an extent at which you think people should have it or not have it where it should be sort of normal apps versus interactive apps and enterprise apps. So I think there's, there's a few different use cases for animation. I think there's animation that helps support information and content. So animation helps guide users through an interface. And that kind of usually has more space in enterprise apps and kind of more serious websites. But then there's also kind of whimsical touches as well. And I think I just love, I love stuff like that and I feel like it still has a place on corporate sites, like especially if you're trawling through a really dense page of information and then there's like a little whimsical animation or there's a button that does something unexpected. I really like that kind of thing. It just kind of makes you smile and it makes the website feel a little bit more human.

Yeah. I mean, honestly, as you were describing that specifically when you use the word whimsical just reminded me of good old clippy, right? Clippy made Microsoft Word feel special. So maybe in all of our websites we need, not all, but in some of our clips we have a clippy equivalent in terms of animation and just add in some fun. But one thing I know that you do a lot is you try to sort of educate and sort of spread sort of the word of like how to do amazing, creative sort of computing things building. Cause I also know you spoke about how you've got sort of a group of people who you do creative coding with. What about some newbies? If there was somebody who was new, are there any articles or courses that you would recommend for a newbie getting started and wanting to know how to make their websites look as beautiful as yours? Um, so I think that there's, there's, there's a lot of places. I really love CodePen, like the community around CodePen cause it's just really supportive and really conducive to kind of sharing and learning from people. Um, and if someone wants to get into GreenSock a bit more, we've actually got forums. So I kind of like looking at them as Stack Overflow, but with nice people in them. Um, so if you, if you want to kind of learn something new, um, go into our forums and chat to some people in there. Um, and we've also got really good docs as well.

So there's lots of docs with CodePen links that you can fork. Nice. Honestly, there are certain things which are just like staples of sort of web dev. And I think CodePens and being able to see what other people have built and how I love seeing so many creative CodePens out there. Being able to steal a few ideas here and there for some of the things that I build every once in a while. But being able to also have good docs on GreenSock I think is great. And also if you are interested in GreenSock and maybe you want to learn more, and maybe you actually know a lot on what's contributed, definitely check out those forums.

But when you're, when you're not sort of building really, really amazing sites and working with GreenSock, what else are you sort of doing in sort of the web space? Is there anything else that sort of tickles your fancy or something that like you're really interested in? Oh, in the web space. I'm really into static sites at the moment. Mostly just because it feels like people talk about animation impacting performance. And I think if you're doing lots of very complex other stuff, you have to be very careful with animation. But static sites feel like just a playground because they do everything server-side, and then you just get these lovely static pages and it feels like you can do whatever you want on them. Like all the creativity that you want. Because a lot of the kind of more complicated stuff is managed on the server, which is lovely.

Nice, nice. I know we're running out of time, but I want to see if I can sneak one question that kind of just came in from Simon18. Is there a way for a user to skip a scroll animation to move on to the next section? So I think this is kind of like a very specific one, but hopefully you can give an answer. Yeah, that would be all down to how you set up your scroll animations. I wouldn't personally recommend hijacking a user's scroll so that they can't advance to the next section. I always leave the control in the user's hands. So that would be entirely down to how you'd set it up. There wouldn't be something that scroll trigger would do by default. That's a wonderful way. Not recommending people to hijack scrolls. Remember if you're going to animate, animate responsibly, where can people find out more from you about Green Sock and just human Sock in general? I'm Cassie Codes pretty much everywhere. So you can find me on Twitter at Cassie Codes and on CodePen at Cassie-Codes, I think. Just go Cassie Codes or Cassie-Codes and you will definitely find us. Thank you so much for joining us. Enjoy the rest of your day. Cool.