Keep Scrolling

Rate this content
Bookmark

Wait! Not so fast - Stop scrolling and hang out with me for a while! When done right, scroll based animations can add polish to a site, and make online storytelling feel more immersive. GreenSock's ScrollTrigger enables you to achieve buttery smooth scroll based animations with minimal code. Let's dig in to some of it's features together.

Cassie Evans
Cassie Evans
33 min
10 Jun, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Scroll animations can enhance user experience when done properly, but should not distract from important information. CSS, JavaScript, and plugins like Scroll Trigger can be used to achieve scroll animations. GreenSock's ScrollTrigger provides a powerful JavaScript animation library for more complex animations. It is important to consider accessibility and provide reduced motion fallbacks. CodePen and GreenSock's documentation are valuable resources for learning and inspiration in creative coding.

Available in Español: Sigue Desplazándote

1. Introduction to Scroll Animations

Short description:

Hi, folks! Thanks so much for joining me today for this talk. I'm Cassie, a creative developer who loves SVG and web animation. Today, we'll be discussing scroll animations and their impact on user experience and performance. Scroll animations can be great when done properly, but they can also be distracting and nauseating. The key principle to remember is to not distract from salient information. TLDR, not everything needs to animate on scroll. Good scroll animations support the content and serve a purpose, such as providing visual feedback.

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.

2. Scroll Animations and Triggering

Short description:

The bar at the top fills up with colour as you scroll to show your progress on the page. Scroll-triggered animations can guide users, provide visual interest, and keep them engaged. Scroll-triggered masks make the website feel gamified, like uncovering hidden elements. An upcoming CSS spec, scroll timeline, allows for simple animations triggered by scroll progress.

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.

QnA

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

The Whimsical Potential of JavaScript Frameworks
React Summit US 2023React Summit US 2023
28 min
The Whimsical Potential of JavaScript Frameworks
Top Content
When it comes to building whimsical interfaces, React is a surprisingly capable ally. In this talk, I'll show you how I use React to orchestrate complex interactions by digging into some examples from my blog.
Emotional & Functional UI Animations in React
React Day Berlin 2022React Day Berlin 2022
28 min
Emotional & Functional UI Animations in React
React Native Animations Should Be Fun
React Advanced Conference 2022React Advanced Conference 2022
28 min
React Native Animations Should Be Fun
Are you afraid of animations? Well, you shouldn't be, React Native Reanimated got you covered. Your mobile application can share a story through animations, can help users through micro-interactions and differentiate your app from the others.
Animation and Vue.js
Vue.js London Live 2021Vue.js London Live 2021
32 min
Animation and Vue.js
There's a lot to gain from adding animations to your site or app. Beyond their visual appeal, you can guide the user's attention, cover up slow to load components and elements, and reveal sections of a page without the user wondering where it came from. This talk will cover the built-in ways Vue.js helps you animate your site, and how for more complicated animations you can hook into third party libraries. It'll also cover the basics of animation itself – what to animate, what not to animate – and how you can use animations to enhance your website without harming the experience of people with disabilities.
Animations with JS
JSNation 2022JSNation 2022
19 min
Animations with JS
Creating different animation effects like bouncing, typing with vanilla javascript. Looking at several approaches of creating animations with time based functions and Request Animation frame.
Lessons Learnt from Building Interactive React Applications
React Summit Remote Edition 2021React Summit Remote Edition 2021
35 min
Lessons Learnt from Building Interactive React Applications
When users directly manipulate onscreen objects instead of using separate controls to manipulate them, they’re more engaged and more readily understand the results of their actions. Subtle animations can give people meaningful feedback to help clarify the result of their actions. But, the devil is in the details. What often seems simple can be complex to get right, especially when you care about accessibility. Sid shares the lessons he has learned building interactive UIs.

Workshops on related topic

How to make amazing generative art with simple JavaScript code
JS GameDev Summit 2022JS GameDev Summit 2022
165 min
How to make amazing generative art with simple JavaScript code
Top Content
WorkshopFree
Frank Force
Frank Force
Instead of manually drawing each image like traditional art, generative artists write programs that are capable of producing a variety of results. In this workshop you will learn how to create incredible generative art using only a web browser and text editor. Starting with basic concepts and building towards advanced theory, we will cover everything you need to know.