Subtle, yet Beautiful Scroll Animations

Key Takeaways

a few days ago I was on the GitHub co-pilot homepage as I was scrolling down trying to figure out if I should buy this thing I noticed how different elements in the page would animate into the screen when they became visible like this text comes in first then the icons come in staggered after that I was so impressed in fact that it's what pushed me over the edge to buy get Hub co-pilot despite my better judgment if you want to sell something on a website in 2022 you have to animate things on scroll and in today's video I'll show you exactly how to do that it can actually be accomplished with just a tiny bit of vanilla JavaScript and some CSS along the way I'll teach you some other cool tricks and we'll talk about some nextg CSS features that might make this tutorial obsolete in the future there are a few different ways we could approach this problem there's a popular Library called animate on scroll but it hasn't been touched in 4 years and will add about 4 and 1 12 kilobytes to your bundle that could work but the next gen approach would be to use a brand new CSS feature called scroll timeline it's an at rule kind of like a media query that integrates with the animation timeline from the web animations API this allows you to apply CSS animations where the key frames are based on the position of the scroll bar that's pretty cool but let's make sure that it's supported in modern browsers upon inspection it looks like it's not supported anywhere so that one's out of the question for now but we'll keep it in mind for the future another approach is to use the intersection Observer API which does have full support in all modern browsers what it does is tell you if an element in the Dom is visible to the end user that's a very useful piece of information if an element is intersecting we can apply a CSS class that animates it into the Dom to get started open up your editor and just create a plain HTML page type an exclamation point followed by tab to generate some boiler plate then in the head of the document I'm linking to a stylesheet and a script named app.js and you want to make sure the script has the defer attribute so that it's executed after the HTML elements in the body are available now go ahead and create the app.js and style.css files you can view the website by copying the path to the index HTML file and paste it into a browser or if you have node installed you can run npx serve from the terminal now that we have a blank website I'm going to add some markup to the body in the form of a bunch of different sections with some basic content the content itself doesn't really matter now in the CSS file I'm importing a Google font then adding a dark background to the body now the most difficult thing you'll have to do in this tutorial is Center a div or in this case Center all the content inside of each section an easy way to do that is to make it a grid and then place the items in the center if you have multiple items inside the section you can also use a line content Center to kind of squeeze everything into the middle I'm also giving each section a mid height just so we have a lot of room to scroll through and now it's time to bring in the intersection Observer we'll first need to identify an element in the Dom that we want to observe and this would be much easier to do in a component framework but in vanilla JS we can give each element a special class like hidden then in the JavaScript grab all the elements that have that class using document query selector all the next step is to create the intersection Observer this is a class that takes a callback function in its Constructor the cool thing about it is that it can observe multiple elements or entries at the same time this function will run anytime the visibility of one of the observed elements changes because it handles multiple entries we'll need to use four each to Loop over them then we can run a simple conditional check to find out if that entry is intersecting the viewport or not if it is intersecting We'll add a class to it called show which will make it visible if you only want to show the animation once you could stop here but if you want to show it multiple times then you'll also want to remove the class show when it's not intersecting now that we have the Observer we need to tell it what to observe in this demo we can simply Loop over all of the Hidden elements and tell the Observer to observe each one of them and that's all the code we need on the JavaScript side we can handle the actual animation with CSS transitions the hidden class will apply an opacity of zero making the element invisible while the show class will bring the opacity back to one now we can easily turn this into a fade animation with a transition property and now when you view the website you should get this fadein animation when the elements scroll into view so overall that effect is super easy but there's a few extra Pro tips that I want to talk about here first of all you may want to put your animation code inside a media query for prefers reduced motion not everybody wants to watch your stupid animations over and over again so this is the polite way to write your code the other thing is that you can do a lot more than just a simple fade I like to go balls out and also animate the transform property to start the animation all the way on the left side of the screen and I might also use the filter property to throw in a blur which gives us an animation that flies in from the left side and goes from blurry to clear and just feels a little more interesting and lifelike that's a nice Improvement but if you're working with multiple items in a list list they'll look way cooler if you stagger them which can be accomplished by adding a delay for each item in the list as you can see here I have a div with four children that all have a class of logo in the CSS we can Target the children with the nth child pseudo selector it'll find all the elements that have a class of logo and the parent element allowing you to Target them one by one or the second element will apply a transition delay of 100 milliseconds then 200 milliseconds for the third element 300 for the fourth and so on and that's all it takes to create a far more interesting staggered animation thanks for watching and I will see you in the next one