090: Scroll-driven animations

Key Takeaways

[Music] hello and welcome back to the CSS podcast I'm very excited to dive into today's topic which is scroll driven animations there are so many cool scroll based experiences that you can build on the web and the new scroll driven animations API makes it much easier and more performant to do so you might already be thinking of scrolly telling experiences as an example of scroll driven animations that you've seen online like flashy marketing pages but scroll driven animations can also be used for things as practical as header animations or sliding a navigation bar in as you scroll down the page so as in our last episode we have bramis vanam here to talk to you all about scroll driven animations hello BR how youall doing thanks again for having me welcome back to the show it was great I loved recording with you last episode so what we're like let's do it again yeah so excited to be here as well so tell us a little bit about scroll driv animations well as you might have guessed from the name scroll driven animations are animations driven by scroll and the typical way that you yeah whoa and the typical way that you you would do that is you were to use JavaScript right you would set up a scroll listener event somewhere and then hook up a call back to map the scroll progress to the animation progress so you're reading the the offset top from the scroller and that's not good it's not good I always think about it like Java JavaScript shows up late to the party right like someone already came through put all the chairs and all the food in a position and JavaScript busting Hey where's everything at hey what's your top what's your left what's your and they're like we're about to start moving into the next you're like I don't care give me your positions I'm about to move that and that and this and you're like where were you last frame when we all did that together and javascript's like I don't show up at that time that's just not want to show up and then you have to give it all the information which takes so long and then it has to apply the changes and then you have to send that back yeah so yeah AKA problem is those scripts run on the main thread so it's subject to Jank JavaScript could even be busy while it's trying to do that and it and it can't handle all the work or another problem is you got to load up a big huge library to try to make it performant where they're doing all these things to try to avoid as much as possible or you might even just need to learn a new way of animating things using some new object notation or something else that you're not maybe as familiar with as the CSS key frames that we've come to know and love over the past 25 years or so so yeah JavaScript shown up late to the party we don't want you here yeah and this is where the scroll animations API comes into play because it can like solve all those problems because you don't need to learn anything new with the scroll driven animations API because they give you a set of features that integrate nicely with the CSS animations and the web animations API and because of that integration you don't have the Jank problem because when animating a property that can be animated on the compositor well scroll driven animations using the scroll D animations API they will also benefit from that nice and that's the kind of classic properties like scale transform opacity and we have a case study of that which we'll Link in the show notes check out developer. chrome.com blog brog brog uh but it's anyway you'll see it it's called scroll animation performance case study check it out yeah so as a reminder you don't need to learn anything new here because like most typically you already know how to make a CSS animation and if not I bet we have an episode on that right somewhere a long time ago maybe we definitely talked about animations and I really do love the API here because it feels like it makes so much sense it is important to note that scroll J animations has both a CSS and a JavaScript interface but for the sake of the CSS podcast here we're only going to be focusing on CSS so we'll link to some more information about how to use JavaScript to to hook into scroll animations but for the sake of Simplicity we'll be focusing on CSS also note that this feature was initially covered in episode 16 which is way back in season 2 we're in episode 90 now so that was a while ago and this feature has evolved a lot since then it looks very different now now we're talking about the stable shipped feature that has shipped in Chrome and other browsers are working on it we I'll talk about that in a second but the API shape is has gone through a big rewrite thanks to feedback from the community and from other spec editors so it looks very different now and it works much better than it did yeah I remember listening to episode 16 back in the day I wasn't even a Google employee back then way but I did get name dropped in that uh episode because I was experimenting with this API a lot before and you picked up my demos and told the word like hey these are great demos by Ramis and then well now I'm here wow look at us now look at you now Ramis you're on the show I love that add full circle sort of scenario I love it I love that yeah so um just a quick recap of browser support this feature shipped in Chrome 115 chromium 115 so it's also in Edge Firefox is also actively working on it we've seen some commits there and Safari is also publicly supportive of the API so while it's not shipped in those other browsers yet we hope to see it Landing in the next few months hopefully to years but we we don't know what the road map looks like there is a polyfill for this feature so you can use the polyfill to support unsupported browsers because this isn't one of those features that you can easily Progressive enhance with and you're probably already using a JavaScript library to do this anyway so you might as well get some of those performance benefits and DX benefits of using the native feature while we wait for full browser support you can use it a little bit for Progressive enhancement if it's things that aren't critical to user Journeys like just having things kind of animate in nicely if you scroll down a page I think scroll it telling could be one of those things but it really depends on your use case so think about how this works for you keep in mind browser support and keep in mind there's a polyfill yeah typically the these are for animations that like aren't critical but they really make the difference in the end like if you can add them they give like this extra flare this extra nice touch to your web page and you're like oh yeah this is smooth but if you don't have them well you can still submit the form and you can still click the link so yeah no harm there so let's run a little bit back um scroll driven animations as I mentioned you can complement these with CSS animations or the web animations API and as you might know an animation by default runs on the document timeline and that is a timeline that gets created when the page loads so when when the page loads time is zero and then it starts sticking forward every second and we hook our animations onto that in CSS using properties like animation duration animation delay we are targeting that document timeline now enter the scroll timeline that is a new type of timeline that tracks the scroller from start to finish so when you're at the top of the scroller in in one that Scrolls vertically you're at 0% scroll progress and when you scroll all the way down to the bottom you are at 100% scroll progress and then for a horizontal one you are at 0% one at the left and if you scroll all the way to the right you end up at 100% And this flips by the way for RTL languages and whatnot so yeah sick um yeah so so this scroll timeline attracts that scroller and you can use that type of timeline to drive your animation so instead of saying like hey you should animate 5 Seconds over like a time of 5 Seconds you can say no no you should animate as you scroll from the start of the scroller to the very end of the scroller and that creates a direct link between the scroll progression and the animation progress so as you scroll up or down the animation moves forwards and backwards in direct response and that's a bit of a difference so make here like you you might think of scroll triggered animations well those are a bit different because scroll triggered animations are time based animations that trigger when you reach a certain scroll offset so scroll driven is directly based on the progress of the scroll offset and scroll triggered is progress based on time but triggered by crossing a scroll offset so this only works at least right now based on the full duration of the scroller so you can sort of scrub back and forth on that scroller and the animation will go forwards and backwards right yeah it kind of goes both ways so that's pretty cool you might have seen scroll triggered animations I feel like that's more common on the web right now probably because it's a lot easier to do on the web right now with JavaScript than real scroll driven animations that's something that the team is working on next not landed yet but that is an effect that as Brahma said would use a timer it would just use the scroll position to trigger it instead so this is different this is going to be fully scroll driven based on that scroll time oh man it's so weird talking about time because not really time scroll position it's really the scroll position from when you started to to the end of the scroll yep that's a really good point and yeah scroll triggered animations it's funny because that's like JavaScript showing up to the party just once to be annoying you know so instead of like them showing up every frame be like Hey where's everything at I need to move some stuff it's like just a one time thing so you're like oh we're limiting how annoying JavaScript is in this flow and you've got a really good example on your website bramis which I'm sure we'll cover more here in a second but it's like a reading indicator that grows as you scroll down an article that you're reading so it's like a a red bar at the top that starts at zero and then the goal is to have a Barbie full width by the time you reach the bottom and that's something you can very easily wire up with this new API and I think that's a good intro scroll driven animation yeah I remember back in the day I added this to my website this feature this was like 10 years ago but the way that I did it was really awful I created a gradient uh in CSS that essentially went from the top of the page to the bottom of the page to create a line like think of like the top left corner to the bottom right corner like I remember that created like this triangle thing clipped it or something like that as you it's a triangle and then you only show the bar at the top so it looks like there's progress moving cuz the backr position is fixed so as you scroll the page the background which takes up from the top to the bottom stays but you see more of the colored bar on the left versus the right like that triangle and it f sort of fake fills up yeah the bar yeah you could tell if you like on a short page you could tell like the line was very slanted at the end but if you were a very tall page it was like almost upright but yeah you could tell it was a heck weird hack weird hack happy we don't have to do that anymore yeah now now so now we we no longer need hacks for that uh because we can create these scroll timelines Straight From Within CSS and for that we have a new function which is named scroll and that's it and that scroll function if you do that it will create a scroll timeline for you which will track the nearest ancestor scroller in the blog Direction nice and to use that because like you can create it but we also need to use it right so to attach that to our animation uh we have a new property which is called animation Das timeline so to make an animation scroll driven you can combine both and you're done uh for example if you have an animation somewhere that says uh an animation declaration that says slide one second linear forwards you extend that by adding animation timeline so new declaration to that with the value of scroll to make it scroll driven and that's it and if you want you can drop the one second duration from the short hand because seconds really no longer have a meaning here because you are using that scroll timeline and it's as easy as that yeah you create your first scroll driven animation by just just adding the animation timeline decoration to it woohoo nice it really is that easy all your key frames that you've ever written before are still valid all you need to do is after you write your animation declaration you add a new line and say animation timeline scroll and it will find the nearest scroller and as that vertical scroller is scrolled it will power your animation it's super cool and you can configure this as well so it accepts two arguments the scroll function I mean what kind of function wouldn't take arguments anyway right so this one takes two takes an a to determine which direction you want to track so this is crucial because the default is y and if you want to change that you're going to have to specify X and A scroller argument to determine which scroller so in case the nearest scroller is going to be an issue for you you can specify an exact one so again just on those accepted values for the axis argument you can specify block or inline if you're working logically y or X and this determines the axis that you want to track to progress your animation the default again is block and for the scroll this one gets a little bit more complicated but nearest is a keyword you can pass that uses the nearest ancestor scroll container and that's the default we keep talking about you can also specify root so that's in case you have a scroller and a scroller and you actually want to track the primary document scroller you can specify root you can say self which uses the element itself as the scroll container very cool and tricky and of course Ramis has your back here with scroll drift animations. style I was waiting there for you to say I didn't want to say it first but noas this this great site and a bunch of tools on the site too so it's scroll D driven D animations. style and one tool specifically here that helps you with understanding what nearest versus Root versus self is is this sort of scroll timeline parameters tool and this I think is really useful because it shows you what different animations actually do based on the scroller and the axis so as an example here with the scroller in a scroll that's kind of what we see here you have this inner scroller outer scroller when you have the scroller be the nearest scroller you're looking at the ancestor the nearest ancestor so you have this like rainbow animation when you scroll the scroller that's outside of the smallest scroller and nothing happens when you scroll the actual smallest scroller because you're looking for that ancestor um and then when you have the root you're looking at the page like the root of the page itself so you actually have a scroller and a scroller and a scroller in this example SC where you see this like animation yeah scroll setion this animation happen when you are scrolling the the page itself and then there's finally self which is applying the animation on the smallest baby scroller uh that's inside of the other two scrollers because you're looking at itself for the scroller and then of course block and inline this changes the direction the directionality of the scroll that's then applying the animation really nice to see it just right in front of you so again check out scroll driven animations. style where you'll get a bunch of resources here demos and tools and this will help you understand how all this fits together there's not just this tool there's also a little timeline range visualizer a progress visualizer a bunch of stuff that's really helpful yeah we we'll we'll cover these in a bit uh let's bring back a little bit to the to the syntax So Adam mentioned we have two arguments for this we have the AIS and the scroller and the way that you pause these into the scroll function is by separating them by a space and the order doesn't matter there so if you pass in uh block space root or root space block that's basically the same it doesn't really matter and also since block is the default well you can omit it so you can have for example scroll open the parenthesis root and then close the parenthesis and that will track the root scroller because you said so in the blog Direction because that one is the default now there there's also like if you look at these values of all these scrollers like you're somewhat limited by it because you can only do nearest root ourself but maybe like sometimes you want to track an element that is not the nearest one or not the root scroller or not the element itself like you you want to track a scroller at the far end way at the other side of the page so for that we have an alternative syntax where you canot create an anonymous scroll timeline with a scroll function but you can create a named scroll timeline by giving it a name and as you might have guessed it maybe the property to do that in CSS is the scroll timeline name property so that's scroll Das timeline Dash name and the value is the name that you want to give to that certain scroller timeline with the one caveat that is a dashed ident so it needs to start with two dashes so for example you can have scroll Das timeline Das name colum and then the value of-- my scroll nice and this is kind of why we've been suggesting to just dash dash all your idents so that way you have to try to remember which ones are dashed ident types and which are just types ident if you're just Dash dashing all of them it's glanceable scrubbable and you can just find these things nice and easy but yeah yeah like anchor names have to be a dashed ident VI transition names do not but they can be so just Double Dash all the things definitely something that we are all recommending now yeah and it's also very easy to see at the gloss you you see like it has two dashes I named that it doesn't have two dashes oh it's a keyword at the browser gave me whatever yeah exactly and then you could do Dash Das Auto D fun little side note here too I was just pinging a rule remember rule from CSS day I was like we need a dash dash ligature for CSS that turns the dash dash into something cooler like why is Javascript got to get all the cool ligatures how about our variables that we reference all the time in CSS get this cool ligature in front of the variables anyway what would that look like I don't know that's why I sent it to him I was like do something cool I don't know what it should be all right I love it well we'll we'll mle on it we'll mle on it but then you can use that Dash ident as a value for animation timeline from before we just talked about scroll timeline name there's also animation timeline so instead of Animation timeline scroll like the scroll function you can do something like animation timeline D- my scroller and then the former this one is called an anonymous scroll timeline where you're using the scroll function the latter one is a name scroll timeline because you gave it a name yeah and the outcome of these can be the same like you you can give the nearest ancestor scroller a name and then use that name so in instead of using scroll function you can use the dashed ENT and I sometimes like to do this because it's it's more explicit like instead of having the browser figure out like oh what is the nearest scroller I'm like no no this is the one I've got it figured out for you one downside with it though is that the lookup mechanism from an element that uses a timeline as its animation timeline lookup only goes up the ancestor Cree so it goes from the the element that is animating it checks its parent hey do you have this name nope it goes up to the next hey do you have this name nope and so on and so on and so on until it ends up at the root it's like container queries so container queries have the same limitation right you can name it your container or you can just discover the nearest Anonymous one okay cool so that I I feel like it's almost always better to give things a name uh because then you can ask for it directly or be anonymous and S of you get to be selective yeah this kind of reminds me of anchor too like there's different reasons for using something that's an explicit anchor versus an implicit anchor where you might want to name it you might not want to so I think this is also similar where you have these functional CSS components that you can string together or you could name them and be more specific there but I think bramis is about to tell us that scroll driven animations can get around it yeah it's it's not limited like the other features we're talking about it's unbounded yeah so so by default it looks up the dop tree it goes like for all the parents say like oh do you have this name but you can like create a shortcut you can say like hey you know what on a shared parent of the element that is animating and the element that is being tracked you set a timeline scope property and you give it a value of that dashed ident so for example on the body element you can say like timeline scope Das Das my scroller and then the one scroller will create like a simlick type of thing to that one and then the element that is animating which is not a child of the scroller can find it through that Sim link so you can like make links across your Dom from the one far end to the other yep and I've used this it's like a I think it's a really good use case are the dots underneath the carousel cuz they're not they're not inside the scroller right they're like they're living outside of the scroller yet they want to represent what's going on inside of there and so um you mentioned Sim link I kind of think of about it like hoisting where the scroller uh says hey I got a timeline scope here's the name of my scope and then a parent element can register that same scope and then you've got this these dots that can access it so by allowing the scope of the scroller name to kind of go up the tree you then make it available to other branches that weren't otherwise in there and it becomes invaluable when you have things not inside the scroller wanting to observe things of a scroller oh yes that's a really good example like when you're looking at one scroller and using that to animate something else on the page that's really complicated to do and this API makes it really easy yeah so um and in your example Adam um you would use a timeline scope property um you don't necessarily to use it on body or or root because like that's maybe a bit too broad but you would use it on the shared ancestor of uh the element that has the navigation dots and the element uh that is a scroll that you want to track and then you have the link uh between both and yeah magic yeah it's the the carousel component itself is like holding on to the scope of its child scroller so that other elements because you also had the next and previous buttons that need to know when you're at the end or beginning of the scroller so you got buttons that need to animate based on scroll position and dots and all of that can be contained inside of that Carousel component yep that's so nice I love this ex like example of it because you might think why not but that makes so much sense um so in addition to the scroll timeline name property we also talked about axes and so there's also a scroll timeline axis property which accepts the same value as the axis argument of the scroll function so you could think of this as like the long hand way to say this or the cssy way to say this instead of doing it in the function which I imagine you'd want that access to be in line for something like the carousel so the values that you can get are XY in line and block with block being the default because a default scroll on a page is a block scroll but if you're making any kind of component like that Carousel then you probably want to change that to inline and if you want to declare both the name and the in one go you also have a CSS shorthand which is just scroll timeline and this is the Shand for the two long hands where you can put the scroll timeline name and scroll timeline axis so you could have these sort of explicit names and axes in CSS instead of doing it inside of the scroll function so lots of different ways to set up your scrollers and make it all connect totally all right okay so for the anonymous and named scroll timeline we track the scroller from start to end but some times you might want to attach your animation to only part of it so like we've got an example where you track the scroller only from middle to the end or maybe you only want the first few 150 pixels like when you want to have your sticky header shrink into a smaller version so it's attached to scroll directly but only a portion of scroll how do I do that bramis yeah for that we have a new CSS property an extra one which is called animation range so that's animation Dash range and it's a property that accepts two lengths so that can can be pixel values M percentages viewport units you name it any length can fit in there and the first value is the animation range start which marks the scroll offset when the animation should start and the second one is animation range end which marks the scroll offset by which the animation needs to be finished so in the shrinking header case the value for animation Das range would be 0 PX space 150 PX and as a result that animation that is used using that timeline will only be linked to that scroll distance of 150 pixels so the animation will run from 0% to 100% over a shortened scroll distance of 150 pixels cool and the cool thing is that because it's a length well you can even do calculations with it so say you want to run your animation from the middle of the scroller to 200 pixels from the end well you can set the animation range start to 50% but you set the animation range and to Cal 100% minus 200 pixels that all just works um why did I never think of this that's brilliant that yeah of course yeah it's amazing and if if you if you can't follow here or if you want to see it like a visual um I have a demo for that so the shrinking header demo check it out in the show notes um go to scroll D driven animations. style find it there view Source or hit the little I icon at the bottom right and you will get an explanation of the code which we already just gave you here like right now but yeah I smash that eye icon so hard every time I'm looking at a demo I'm like teach me the ways and you break it down all perfectly I feel like like learning how to articulate animation ranges is the key to taking your scroll animations to the next level and I have a quick little question for you it's common for me to be like I only want like in the header example you shared you used pixel values 0 to 150 pixels I've often done something like 5 VH where I'm like only for the five viewport height you know range is kind of like the small percentage of the entire document run the animation but then I'm like okay so then if I have nested scrollers maybe container query units would be good because then it's contextual to the size of that container scroll area but then I'm looking at these percentages and I'm like maybe percentages means I don't have to care about VH CQ or any type of like length unit that has to do with being in a I just get the there's a difference so um the viewport unit so for example viewport height or the container query height that is the height of the scroll Port so that's uh like the box where you see the content in but 100% is not 100% of that box 100% means when you have scrolled to the very bottom of that scroller so yes there is a difference um great question there yeah that's good to know okay cool so there is value in viewport units for like your document animation ranges container query units for your nested scroller animation ranges and then percentages when you want to represent the entirety of the length of the thing that's being scrolled itself the really long or runways I like to call it like the full Runway is your percentages cool okay thank you that really clarifi uh things for me appreciate that yeah so something that I really struggled with too when I was first learning about scroll animations was the difference between this idea of scroll timeline which we just covered and a view timeline because they seem so similar but they're not they're very they're they're similar but different and they have different use cases so I definitely want to go over the differences between these and so far we've been focusing on scroll timeline where you would track a scroller from start to end to drive the animation so using that scroller but sometimes you don't want to animate something the entire scroll progress timeline that might be like a really long page and you just want to animate an element as it itself flies over the scroll Port so you want to focus on just the interaction when it enters the scroll port and right as it's about to leave the scroll Port so there's a different way to apply styling to this kind of interaction versus having to look at the entire viewport and and where this is really helpful is if you have things like images animating in andout or some like text animating in andout you can apply these effects to like all the images in your page and you don't have to track the entire viewport height scroller where you'd have to know where each one is so this is really helpful and I I want bromas to help explain this to to the audience like he helped me understand it when I was first learning about this feature and so typically you you would do that with an intersection Observer if you know that you already have a head start here but you can also use scroll driven animations for this because with that view timeline that you mentioned you can track elements across the scroll board so the full range of a scroll timeline is from the beginning to the end of the scroller but for a view timeline it's different it's from the moment the track subject is entering the scroll Port until it is leaving the scroll Port West boss recently described this as and also he said the word subject but I like to think about it is like each individual element because if you give the same animation to multiple elements it will trigger as they themselves individually and this is where uh Wes said first Peaks its first little pixel's head into this into the viewport and then the animation ends right as it poops its last little pixel and so that would be the entire range of a v timeline versus the scroll timeline being the entire Runway of the scroller but yeah these are extra cool they they come with some sort of like natural staggering and other cool things so I I'm getting ahead of myself but be excited for view timelines they are Super Rad yeah I I like that you mentioned that this gets applied to every match so if you have like a view timeline uh that is tracking 10 images each image will create its own view time and say like oh no I'm I'm crossing the scroll port and then like 400 pixels down the next image says no I'm crossing the scroll P so they each yeah they each get their own little view timeline here's my little cute little pixel there's my last little pixel yeah yeah this one I think is really really useful and especially like when you first look at the API it's just like view timeline scroll timeline but breaking them down and where they're used very important yeah so to create one of these uh well if we have scroll for the scroll timeline then you might know what the the function is for the view timeline takeing guess is it view yay I wanted to say something not view just to like but I was like I can't come up with the fast enough but yeah just like the case with scroll you got View and you can place it in the animation timeline property so just like how you add an animation declaration that's like here's my key frames uh you know I don't care about duration anymore but I do want it to be linear in both you follow that up with animation timeline and you put the view function in there and this one accepts only one argument which is the access to track and you can't define the scroller on because it will always track the element you applied it to inside of its nearest scroll Port yeah and a typical situation where we would use and we've already mentioned this is where you want to decorate images so that they reveal themselves as they enter the scroll board and as they leave the scroll board so for example when they enter you could do like a fade in or like I did in one of my demos I'm using a clip path in the key frames to mimic like this reveal curtain effect so the curtain opens up as the image is crossing the scroll board and just like before I can leave the existing animation shorten that I had in place and then add an extra declaration into the CSS rule which says animation Das timeline with a value of view which is the view function so it's view open parenthesis close parenthesis and each matched element will now reveal itself as it enters the scroll Port until it has left the scroll port at the top yeah and similar to The Scroll function if you want to name your timeline there are the properties of view timeline access and view timeline name so individually you can use these CSS properties and these values are pretty much the same as their scroll timeline counterparts where you would set up a view timeline name give it a Double Dash ddent and then view timeline axis would be inline block or X or Y uh which tells the browser what directionality to look at yeah and also similarly to scroll time Tim lines is that with view timelines you can attach an animation to only a subpar of the full range so for example you could attach an animation to the entry range so that it runs when the subject is entering the scroll board or you could attach it to like the exit range which is when the subject is leaving the scroll Port yeah and that's great for things like entry and exit effects like for example a scrollable list where each item sort of Fades in as it enters the scroller and then Fades out again when it leaves the scroll port on my site I just have an entry effect where things kind of fade in and move in from the left sort of like a little transition and it's just a nice Progressive enhancement because it kind of enhances the like little oh something is moving here brings your eye to that part of the site but it's definitely not necessary but it's it's nice to use these for these little entry and exit effects yeah so there's a bunch of ranges that you can Target but before I go over all of them I want to First mention I have a built a tool to visualize these ranges so you can find it over at as you might have guessed scroll Das drivet animations. style and there in the tools section you will find a timeline ranges visualizer so if you are listening to this with a computer nearby it might be worth opening up the tool and following along because yeah this will get complicated and the tool helps you understand everything yeah it sounds simple like when we're talking about it but once you go to build something it gets really difficult and yes this tool is invaluable I've built like 20 demos I still use this tool almost every time just to hone in and just confirm and visualize what my mind's eye is trying to do so it's a must visit and bookmark y'all seriously yes plus plus one so the default range here is cover range which is the range U when the item is entering the scroll Port until it's leaving the scroll Port the starting position is marked by an animation range at the position cover 0% so that means 0% into the cover range and then the end position is is marked by I'm sure you could guess it an animation range at cover 100% so that is 100% into the cover range and if you want to use these values in your CSS uh use the animation range property and set the value to cover space 0% space cover space 100% that's the default you can change those values too you can change the percentages you could have it just enter and then apply some style at 25% so just happening towards the bottom or at 50% so just keep in mind that that's how these sort of cover range percentages work uh for the entry and exit effects we just mentioned you have different range names available so the entry range is quite cleverly named entry and the exit range is named exit so to animate something while it's entering you would set the animation range to entry space 0% space entry space 100% And for an exit animation the value would become exit space 0% space exit space 100% yeah and if you're targeting uh 0% and 100% And the same ranges like in the start and in the end you can simplify this to just exit for example so if you are targeting exit 0% to exit 100% you can shorten this to only exit as the value for animation Dash range hot tip nice yeah that is a hot tip finally there's also a range for when the element is entirely within the scroll and the name for that range is contain so cover is when it's about to enter and exit and then contain is when its start most position is within that view so its start most position is contain 0% with the space in between I'm not going to say it every time contain space 0% and the endmost position is contain 100% yeah so to reiterate there we have four ranges that you can Target namely cover entry exit and contain and technically speaking there are two more ranges namely entry Dash Crossing and exit Dash Crossing but for smaller than scroll port objects these mean the same as entry and exit respectively I won't dig into these right now because it would just confuse you a lot more than you most likely already are right now just use the tool go use the tool go look at the options he's got them in a drop down and then they're visualized you can kind of see oh that's why entry Crossing and exit Crossing were a little kind of funny okay so here's the part where it gets interesting I mean let's just be honest it's been interesting since the start but you can mix and match range names and you can also play with the percentages so again this is like clamping the amount of time where the animation is going to occur to a certain and specific moment or area of that crossing of the scroll Port so for example you have an animation range of cover 0% cover 50% that end range of cover 50% is midway between the cover zero and 100% so when this is applied the animation will run from the moment the element is entering the scroll port and peeking its little pixel into the scroll Port until it is positioned halfway through the scroll port at which point it completes yeah I use that approach for the revealing images effect again the demo is on scroll D driven D animations. style because I want to fade in the image when it is entering the scroll board but I wanted it to be fully visible when it's like Midway the screen and not when it has left the screen because that would be useless so you could think of this like as speeding up an animation because you manipulate the start and end offsets that determine when this animation should run from start to finish yeah and also like Adam said you can just mix and match the range names so you're not bound to staying within one named range type so for example you could set the animation range start to entry 50% and the animation range end to exit 0% and it's perfectly fine as long as the start range comes before the end range position you're good so you have to go start to end again that tool you can pop these values into the tool and see it visualized and then know you're doing is tot you're like why is my animation running you're like oh cuz it's ended before it even started ah thank you for the visual bramis yeah you you want to know the reason why I built this because I was so confused at first when I started with scroll driven animation I was like why is this happening why is this not working so I built a tool for myself and then realized oh this would help a lot of people so yeah it's public go check it out that's the reason to build things you help yourself yep all right by the way did you realize some of these range offsets Mark the same position like the position for the range exit 0% for example is exactly the same as contain 100% ah it's that spot just before the element leaves the scroll Port so you got lots of options about how you articulate these things also remember that we were able to do Cals with the scroll uh timeline ranges well you can do the same for view timelines so where you see the percentages there where you have like exit 0% exit 100% you can change those percentages by a calc for something Y and I've used that before where like I wanted an animation to run up to the point where it's 30 pixels from the start edge of the scroller and I could set that with a cal I set the animation range end to exit minus 30 pixels o so you can even go into negative values just like negative directions and stuff so that way it triggers 30 pixels from The Edge gives it a little bit of a head start or whatever you can kind of time these things yeah that's interesting or another one where you want the animation end when the element had fully entered the skull Port plus 1 M and so for that you could set something like animation range end to enter and use Cal inside of that and do Cal 100% plus 1 M so you could do negative offsets positive offsets it's really really fun Lots I I just have never thought about using calc inside this so it's like a fun thing to think about yeah it's it's really powerful stuff but I would I would suggest like start off with the percentages because admittedly this this is confusing and once it clicks you can like throwing some Cals in there um and again if if you if you couldn't follow here no worries there's a ranges visualizer tool up over at scroll driven. animations scroll Das driven dasan animations. style go play with it hit some of the buttons change some of the options and I'm sure you'll get the hang of it yeah there's a bunch of controls on the right change the percentages and take the CSS so just like Unis anchor tool where I go there and click around and get to I want and then I just steal that CSS right off the page you can do the same thing on scroll driven animations. stop click the clicks it's always nice you can copy the CSS so that was a lot of stuff um should we wrap things up here yeah I think we should because we're already like more than half an hour in nearing 40 minutes well over well over half an hour yeah so um if you couldn't follow along here um good news for you there's basically only one thing that you need to remember from all this and it's a URL which is scroll D driven D animations. style um I didn't keep track of how many times we said it during this episode so let's say it one more time scroll D driven Das animations. style that's your OneStop shop for everything about scroll animations it has a bunch of demos which we didn't cover here in this episode such as a coverflow Recreations columns that move in opposite directions sections that scroll horizontally as you scroll vertically very weird but very cool as well um if full card to Sticky header all great stuff that you can find on there yeah when we talked about how each demo has like a little info icon at the bottom right it's this is going to triggle it's going to triggle a dialogue it's going to trigger a dialogue with an explanation of how it works and you can also hit the switch icon to switch to like alternate versions for example like there's different approaches or you can switch from the CSS to the JavaScript variants in case you wanted to you know just get a look at what's the JavaScript API like oh yeah that's a good call too yeah since we didn't talk about JavaScript API in this show check out scroll driven animations. style and you could see it on there but also promise didn't you make a video course all about scroll D animations too that was going to be the next thing that I was going to mention like on the site you can also find a link to a free video course it's named Unleash the Power of scroll driven animations it's a 10-part course available on YouTube and it teaches you all there is to know about scroll driven animations in five episodes and then it continues with five more episodes um that that some of the demos that I have created I've poured my heart and soul into that one so please check it out give it a thumbs up if you like it and I'm sure that once you have checked it out you will be like the master of scroll driven animations it's so good and it's really going to ramp you up you too can be promise seriously and these scroll driven animations they can really set you apart for just how things look you know they're off the main thread so many times people open up a demo and be like sure it looks good but why is it so buttery you're like off the main thread it really helps moo smooth and don't forget also I mean brma says it's covered in so many ways here but there's an extension that you can add onto Chrome Dev tools and it allows you to visualize the ranges right there where you are while you're writing it and it even updates as you Scrolls you can kind of see what you're building visually again another invaluable tool to help you as you're creating these animations and these cool interactions yeah good call in the Chrome Dev tools extension that is really nice little mini map visualizer yeah and again you can find the link on uh your onetop shop for scroll animations which is scroll dd- animations. style it's all on there the demos the information the link to the documentation the video course and also this de tools extension that you can install into Chrome yeah nice definitely check that out it's a you One-Stop shop I love to say that um and thank you all for joining us on this show this might be one of our longer shows for sure um S no it's it's so much information it's really good stuff too it's a free easy API to just get started with I think some of the key Concepts here are things like scroll timeline versus view timeline um understanding things like contain and cover versus entry and exit once you know some of these keywords you essentially are just using this the same way that you do any other CSS animation you just set up the timeline to be on a scroller instead so definitely try it out self it's a really neat feature that is a native part of the platform now and I mean I'm excited to see what y'all build with it and thank you bramis for joining us again bringing the heat bringing the data bringing the tools bringing the rad personality and thanks again for having me I enjoy doing this this this is great this is fun and for all you listeners out there if you got any CSS questions about scroll driven animations don't ask us ask bramis ah just kidding you can also ask this # CSS podcast you know one of us is going to pop up and be like hello how can I help you if you want to find us on the internet you can find me atuna I'm at Argy link and I'm at bramus your question could help a lot of people not just yourself y'all think about others ask us stuff the stuff and then we might make a show on it and if you did like the show also please just give it a little review on whatever podcast app you're using there's so many out there or share this podcast episode with a friend or a coworker or check out scroll D anim .style any of those things are going to help us out make sure that we could keep making cool tools and creating little CSS podcast episodes for you thanks y'all we're looking forward to your questions and we'll see you next time and let's say it one more time scroll dd- animations. style see you bye everyone [Music]