Incredible scroll-based animations with CSS-only

hi there my front end friends have you ever wanted to make animations like this that are all scroll based so it comes in and out as you're scrolling maybe have images fade in as the users going down even have scroll link animations for things that are going horizontally on the screen and maybe a couple of other things as well all without having to write one line of JavaScript or rely on any third party plugins well all of that is possible and it's exactly what we're going to be covering in this video and so to really understand how scroll listeners work and the different things we can do with them and how we can do all that we're sort of going to start off simple and slowly level up our game to really understand all the different things that you can do with them uh and the very first one here uh that I didn't actually have in that first one is going to be one of those scroll Watchers just cuz it's like the most basic simple way to uh show or highlight how the scroll listeners work so uh with this scroll Watcher you can see I've created the lime green bar that's across my head uh are all the way at the top there and it's just basically position fixed height of uh 10 pixels so we have something there with a the background color and a big Z index on it uh and what we're going to do is create an animation so let's do an animation of scroll Watcher cuz that makes sense I guess and we just say two is scale of 1 one uh and scale is the its own property now which is great uh and one one just means on the X and Y AIS uh that our scale is going to be like that and that means here I actually want the scale to start at 01 and let's let's start it actually at 8.5 just you can see it's it's shrinking it like left and right but it's keeping the height of it so I'm going to start that off at a 01 and then all we have to do and this is like the easiest thing in the world uh animation will be our scroll Watcher right that makes sense and I'm going to put linear here just because if uh you use a timing function that's not linear especially for a scroll Watcher it's going to like speed up as you're scrolling which is kind of weird uh but let's do our uh scroll Watcher linear and then what we can do is our animation timeline of scroll and whoops that's a function so there we go scroll and hit save and just like that it it's not working because I I said animation and not key frames H there we go now just like that the magic happens that was a bit of a let down right where you think something's going to work and it doesn't uh there we go perfect I hope people were like oh it's a new at animation this is cool I do apologize for that uh so it's working but of course it's growing from the middle which I think is kind of weird for one of these things so here I can just do a transform origin of left and the transform origin still works even though I'm using the individual scale property and with that now you can see it's growing left to right there's a few different things you can pass into here um but for now we'll keep it simple and we're going to sort of Step Up our game as we go on um but one of the things you can actually do is check tell it which direction you're looking for so if I put y here it will continue working you can see it's it's still coming in um I could switch this to X and now it's not working cuz it's looking for scrolling left and right so let's actually just come here and say body uh width is going to be 200 viewport width just so we get a scroll bar going that way and now you can see it's actually like tracking my scrolling left to right instead because I told it that it should be looking at scrolling in the X AIS Direction uh if I leave that blank it will default to the up and down and instead of X and Y you can also put a uh block will block is your up and down and I can say uh inline and that will be my left to right Watcher right there so a few different things that you can pass in a little bit of a weird example there so let's get rid of that um and keep on going basically it's looking it's going to start the animation when you're you know zero key frames is when the Scrolls all the way at the top and 100 point of the animation is when the scrolling has reached the end and there's nothing left to scroll so that's how this is working uh it's nice and easy and it it works like amazingly well which is really cool and it's just like the Simplicity of that just makes me so happy but we want to do more complicated things right let's fading in our images getting these things to follow our scroll position and some other stuff so let's get into that and for this I'm actually going to comment this out because I find scroll Watchers really annoying when I'm scrolling around um and so for this next part what we're going to do is uh I'm going to skip this part now we're going to look at the fading of the images cuz that's sort of the next stage uh along the way here in what we can do and you can see I have my article images selected right here uh I'm doing a silly YouTube demo so like I just have images thrown directly uh in my article uh and I'm like using on spash for them and stuff so you know if you want a class on these or whatever it is that works better for your use case obviously come in with the selector that you need for these um and for now actually let's come in with the animation and I'm going to do a key frames and not add animation key frames and we'll call it fade in and I'm just going to say from and you can just put 0% here if you want that's just the from is your 0% key frame uh let's say a scale of like8 so they start a bit smaller and they're going to grow a bit and then we'll do an opacity of zero so they're they don't exist yet and then we're going to say two a scale of one and an opacity of one and then you as you guessed we come here and we say the animation which is our fade in and once again I'll go with linear uh but where things are a little bit different is the animation timeline uh if we use scroll here like I mentioned it's looking at scrolling starting the animation when we're at the very top and ending the animation when we're at the very bottom so like the images don't really how that doesn't work and traditionally we would have needed an intersection Observer with some JavaScript right to be able to get this to work so we're only looking at it when it's inside of the viewport now all I have to do is this and watch this this is so cool the animation will start when it enters the viewport and it will finish when it exits the viewport so it's keeping track of when it's visible now that has its definite limitations cuz I ideally my animation I'd actually want it ending probably about here uh and maybe even starting a little bit later I don't want it starting here I want it to sort of start maybe here luckily that's not actually that hard to do and there's a few different ways we can do it and I'm going to start with the one I find super on inuitive and then I'll show you another option that we do have but here inside this view function uh I can actually specify the offsets from the top and the bottom for where this is going to be happening so I can say here let's say 100 pixels and I'll I'll start with that or let's do 200 or 250 cuz it might be a bit more obvious and what that means is uh you can see the animation is and I did this on purpose to have the from here instead of having it on my image just cuz we're really going to see when the animation kicks off H and I'll move myself up so you can see the animation's only starting right there because my my my image exists there's nothing being applied to it and then we're setting the opacity to zero when the animation starts so we see it kicks in once it's 250 pixels into the viewport and then as I'm scrolling this way it's actually going to finish when we're about 250 pixels away from the top or when we are you know this this part here will be at an offset of 250 pixels from the top right there you can see the next one is is clicking in and doing the same thing the reason I said this is kind of unintuitive is because you can actually pass two different values into this and for me they backwards and they make sense they're the your top offset and your bottom so it makes sense that the first one is your top and the second one is your bottom just cuz of how we think but it actually feels upside down when it works because what we're going to do let's keep this one at um or you know let's make this one 100 pixels and make this one 500 pixels and the reason I'm saying it's upside down is because what this means is it's actually going to start when we're 500 pixels away from the bottom and the animation is going to end when we're 100 pixels away from the top so right around here we're getting to where the animation is finished uh and to me my brain just works that this should be where it's starting and this is where it should be ending but this is my top offset so this is how far away from the top are we when the animation will be finished uh and this one is how far away from the bottom are we when the animation you know so we're only watching it when it's between that bottom part and that top part and I understand the logic behind it but it just it breaks my brain a little bit to think of it that way uh so it's a little bit like mucked up I don't know uh but luckily there there's uh other ways that we can um control this that are a little bit more intuitive and so to get to the more intuitive way of actually doing this I'm going to remove this from here and we're going to bring in a new property which is animation range and animation range is actually a shorthand for animation range start an animation range end and this actually for me makes a lot more sense so we're going to say we're going to start at 500 pixels and we're going to end at 700 pixels and what that means is the animation will start once it's 700 pixels in so that's why we can see it the animation's starting when it disappears so we're 500 pixels away from the bottom we're starting and then it's going to finish at the offset of 700 so in this case we're always working from the bottom and for me that makes my life like I I I just I understand that better it it it clicks in for me a little bit more so 500 pixels and then we're good to go uh now there's other ways that we can actually control this a little bit better as well so instead of like you know maybe you want it to start like right now it's basically starting when my image is per like 100% into the viewport you don't want to have if you have different heights of images and stuff you don't want to have to figure that out so I can actually use either cover or contain um are two keywords that we have so if I go with cover it's going to be sort of as soon as it's entering the viewport it's going to kick in and then we're finished once it's 700 pixels away from the bottom or I can say contain and contain is the one where the entire element has to be contained on the viewport before the animation starts and then you can see it's coming in and working and then this is how far away uh until it ends or I can also use contain here it's going to start as soon as the entire thing is contained and then it's going to finish right here when we're hitting the top of the viewport because the the entire thing is contained and we're about to leave out the top so it's kind of cool we get like a few different controls here uh that I like cover I don't cover seems to be a lot like the default um from what I've been playing around with uh contain I actually think is kind of useful because we're waiting for it to all be contained in there and if I'm doing something like this I can just come down and say contain like this instead uh with the shorthand and it's going to work exactly the same so I'm starting there it's ending here uh and I can even then add off offsets to the contain right so I could say contain and then 100 pixels and what that means is it's going to have the entire image will have to be in and contained and have an offset of 100 pixels before it starts and then it will come in and go all the way to there and I I just find that's pretty cool that we can do that but of course now this doesn't make much sense to have here cuz it's obviously causing that weird Flash and other stuff I just wanted to use it cuz it shows really well when the animation is starting uh but ideally you would take that off from there and you would just include that on your image normally so that way we're the entire image is contained we're 100 pixels from the bottom and then it fades in um and even that I I find this is actually probably not the the best so uh just cuz we're getting all the way up to there so let's actually just do this as like a 250 pixels and maybe a 500 pixels or something like that so we just have a short range where this animation is happening but this does open up another problem is when we get to the end of the animation now that I moved this up to here when the animation finishes it's an animation is finished it always goes back to the default state which we've reached so here I just need to add a forwards so when we get to the end of the animation it will stay at that last key frame very important that we do that so we scroll in we get to the end and then we stay there and we get this fun little animation coming in for our images now one thing with this that I would um caution with though is that in general you want to be really careful with animations that deal with scroll uh this one maybe a little bit less so though it is a little bit kind of much uh but especially with this one that we're going to get to so what I would really recommend doing is an at media and do a prefers reduced motion of no preference here uh which means that if somebody hasn't set any preferences in their operating system to reduce motion and they could have vestibular issues and other things where they get motion sickness from excessive motion on websites which can include things like we looked at and especially these types of things where we're going to have reverse horizontal movements going so like horizontal animations while the page is going up and down especially can be really problematic for people that have vestibular issues uh so it's not that hard to do we wrap that in this um no preference media query most people are going to get the the animation kicking in and sliding up but anybody who has uh set things up and if you open up your Dev Tools in Chrome anyway um it is easy enough we can just come into the command pallet with a control shift p or command shift p on Mac and just do emulate reduced motion uh there it is emulate CSS prefers reduceed motion I'm going to turn that on and now with that on I might have to refresh my page I'm not sure if you need to bother with that or not but now you just see it just gives you the normal experience with no animations going on and they just get a regular website because if somebody's coming to their your website and they're feeling nauseous they're leaving they're not going to like try and like force their way through it right so so uh most people will still get the cool effect and people that have opted not to get it will not get it win-win for everybody now let's move on down to uh this next one that's down here and I closed my Dev tools so the the emulation is is not running right now um but let's go down to this one that's right here cuz this one opens up some interesting things that we might want to do and just really fast actually before we move on to the next one I do want to just mention that here we do have other options um I talked about cover and contain we also have entry uh entry is going to work so the animation is going to start as soon as it starts entering the viewport and it will be finished as soon as it's finished entering the viewport so the animation is done here so you can see it's really linked to coming up to there uh the other one is exit so it's the opposite it's dealing with when the item is exiting the page so as soon as it starts exiting the page the animation will start and then it's finished as soon as the exit is finished uh so you do have those options uh you also have the entry entry Crossing um is another one that we have where as far as I can tell it's very similar to entry um and we have an exit Crossing uh here as well exit Crossing and like I said there's the uh cover contain and there is the normal normal is the default um but and I'm sure there's actually a different so the the normal will start there and finish when we get to here um and then we have the cover which as far as I can tell works very similar if not the same as the normal one um I think the the most useful ones honestly are entry um just because it deals with the entry of it and again you could put an offset here so I could say entry 100 pixels so we're actually going to delay it by 100 pixels and then it's going to start um or maybe you know just to exaggerate let's say 500 pixels so we have to be 500 pixels away and then it's going to start um the problem here is it's going to go really fast because it's going to finish when we get to like as soon as the entire thing is in there but if you have a small little delay here it could be something um that's worth it or you just set two different ones ones you can set percentages and other things here it doesn't have to be in pixels I've just been using them up until now there we go some some fun ones there but let's move on down to this section here uh we're going to deal with a different direction and for this actually I already have some CSS set up cuz this is from another demo that I did um and let's just turn this on for a second and for this one I actually have some CSS already set up because this is from another video I did where I was just having you know these types of things that you sometimes see from time to time uh and I wanted to set it up and get it working so you can see they're just going to slowly scroll in One Direction or the other uh but I don't want to do it over time I want to use the animation the the scroll timeline to be able to do it uh but before we do that I am going to come up and we're going to change this overflow X to be a scroll just so we can experiment a little bit with this type of scrolling instead because we can also do that with our view so I'm going to turn off this one for the moment and we're going to come in with this BG shifter which is going to make the background change and it's nothing too fancy uh I just want to sort of highlight and show you how it's going to work where we can come here and just say uh animation timeline and you might think I'm going to do view because we're sort of sticking with the view here but we're going to do scroll instead um and the reason we're going to do scroll is cu I sort of mentioned this a little bit earlier uh but the scroll is a little bit different uh because it can change depending on the context of where the scrolling is happening and so just to show you right now You' think it would work cuz I set my scroll but if you remember before when we looked at this when I set it up it was on the default was looking at if we're scrolling up and down so what I actually want to do here is change this to my inline axis and as soon as I change that to be looking at the inline axis and I hit save you see the colors have come on and the colors are going back and forth and this one is blue and it's the opposite because I have the um data Direction on there and it's doing an animation direction of reverse so now you can see look at that it's working and interestingly this is scroll and not View and the reason I'm using scroll and not view is because when we use this scroll function here it's looking at the nearest ancestor that has the scrolling on it so now it's not looking at my viewport scrolling anymore because this has a scroll bar on it it's going to look at the the scrolling that's happening here and as soon as I have because if I come back up to here even if I took this off it's the same thing because I have an overflow hidden on this so once I do an overflow hidden we've taken the scrolling context for these elements away from the viewport and we've linked them directly to just these elements that are right here so that's even though this is hidden and I that means I can't scroll this way but this scroll in line is going to work here and it's going to be looking at those these things and that means if I do want this these to have an animation on them based on the scroll of the page if I try doing this it's not going to work right so if I hit save on that you can see nothing is working because it's looking at the context within its own element but it doesn't there is no scrolling happening within that element so that's where I can actually fix this by saying don't look at the scrolling within that element look at the scrolling and the root instead and now you can see as I'm scrolling the the whole page the colors are actually shifting around uh it's not doing a huge shift but you can definitely see that there is a difference coming in as I move that up and down so anytime you're changing the scroll context of something which as soon as you change your overflows that's going to happen in that includes having an overflow of hidden uh if you want a different alternative that won't actually cause that limitation you can use an overflow of clip not going to talk too much about that one in this one if you want to know more about it I covered it recently in another video uh there should be a card popping up for that one we're going to leave that as hidden for now and what I'm going to do is leave this scroll set to root but here instead of using this weird background shifting color thing which is kind of weird uh let's go and change this back to my scrolling right here scrolling and now as I scroll up and down the page you can see that it's actually animating those as I go up and down now I need a little bit of work um I obviously broke things a little bit when I set this up cuz uh there's a bit of a blank area that's coming in there and there we go I fixed it um I just wasn't I had some JavaScript set up that was appending some children and it wasn't working properly uh so we have enough children appended now that uh it's going and we have everything running the way we want it to and it has this going on now again these you want to be careful with they're kind of annoying when you're running with things like this so please do this with caution and ideally you'd be locking all of that scrolling Behavior inside the media query with a prefers reduced motion like we've already looked at CU especially this type of scrolling Behavior really can be problematic and now the last thing that I want to look at for this one is doing that fun animation that we had here at the top where we scroll down and we have a few different things coming on uh just cuz it sort of takes everything we've learned and I think wraps it up in a nice bow and so I already have some Styles uh set up right here for this area uh and you know just to get everything I'm stacking everything using grid I have a position absolute for my image in the background which would just make it easier to control instead of using using a background image cuz it's its own element that I can do stuff on and the first thing usually with these types of things as we're going down the text can fade out so let's do that I'm going to come here with an at Key frames uh Fade Out and that just means two opacity of zero nice and simple uh and then we can come up here on the article title animation Fade Out linear so nothing different there and again if you do want to experiment with the timing functions on these you can I just find linear is the that has worked best for me in everything I've done but I'm sure some clever people will come up with better use cases than what I've been doing up until now uh but that works and then we want to come here once again with our animation timeline uh and ideally in this one in general scroll you want to use if it really does need to be something that works for the entire viewport uh the reason I did use the scroll for this and not just view is I guess we could have done it so it's only when it's entering the viewport and only when it's exiting that would probably work okay um I just wanted to make sure that the animation was basically always running and I wouldn't run into a part where it wasn't but it also showed us how we could Target the route if we need to um but here what we want to do is do the view so let's hit save on that uh except I did that on the header and I don't want it on the entire header I want it on my header content and let's paste it in there uh so as we scroll down we want it to go away but ideally it's not going to start right away right we need it to only start when this is getting a little bit closer to being on the bottom so how do we fix that we have our animation animation range and in this case I'm going to go with exit so it's only going to start as soon as we start exiting the viewport except the problem with that is I mean you notice it I guess when we're really close to the edge here right so it's like but it's it's not as obvious as it could be so let's say exit and I'm going to say -200 pixels and the reason for that is I want it to have an offset of 200 pixels so as I'm scrolling down I wanted to start the animation here 200 pix before it starts to exit and that looks a lot better so it's a little bit more obvious that the text is fading out and so and it's completely gone by the time we get out of the viewport perfect for what I want to do here so I'm super happy with that and if ever you're having trouble with this say you had a grid setup and maybe the element is bigger than you thought it would be uh one thing that can be useful is to put a border on something yellow or an outline uh solid and the reason is just so like you know this is where you're going okay I'm 200 pixels away from here and that's when it's starting but sometimes if you're dealing with like the bottom offsets and things like that just like this is sometimes a lot bigger than You're Expecting or there's some extra padding or something so it's mucking up when you think your animations will happen so uh definitely throwing borders on things quickly can definitely help at times so that one looks pretty good and now we can move on to the image which I've already set up here uh and for this one we can try and do a couple of different things right so my animation my opacity is currently at 0.5 but ideally I want to make the image actually become more opaque as the people scroll down so it's like you see it a little bit more before it finally Fades away so let's come in with an at key key frames and uh let's just call it uh I I guess like header header image animation cuz I don't have a better name and we're going to do some weird stuff here so I wouldn't like a fade out you could use anywhere this one you probably wouldn't want to use anywhere so let's say at 25% of the way through the animation we actually want the opacity to be back at 1 and then uh we could say it maybe 85% of the way through the opacity gets to Z uh this is going to work but be slightly problematic when we use it but we'll see what that is in a second uh so once again we do our animation of my header image animation and linear and then we can do our animation timeline uh is going to be my view and we probably will muck around with the range as well but uh so it's going to start and it's fading away and there we go it's gone and then it comes back and remember things will come come back because it's going back to the original state of the image so here I'm also just going to throw a forwards on there that will stop it so once it's gone uh it should actually be completely gone uh oh right I know why this is where I said this would be a bit problematic we also want to make sure that it gets to there and then it stays there until the end so we can just throw that on there so the opacity ideally is coming up a little bit and then the whole thing will actually fade off I don't see this really happening yet but I think as we improve this um we'll start seeing it actually come in it's just based on our view right now and improving on our range so ideally like we're only worried about wanting it to start as it exits the viewport we don't want the animation to start before that so we can just say animation range exit right so we're actually starting now at the 0% key frame so we're at an opacity of 0.5 and now it should increase the opacity we get to 25% at one point and then the entire thing Fades out ah perfect cool cool uh and now to really make this and Hammer at home I think what we can do is come in and just add a scale here and make it get a lot bigger I don't know how big we want to get it let's try a three on there and you can see it's growing growing growing and then it fades out as we do that and maybe we could also just come here and say that we do a uh transform origin of top cuz I think it's going to make it just feel a little bit more natural um if we do that or maybe a bottom even let's see how that looks and then it starts fading out as we come into the rest of it um definitely something that could be mucked around that I'm not even sure maybe we could stay with the original um because it's kind of cool that this text is coming up onto it but then we focus more on that text and it just sort of all fades away so the text Fades off as the image becomes more obvious and then we get the rest of the article coming in and we have that sort of fading helps with the rest of it this is just cuz we were learning stuff and I think the rest of it looking pretty good as I was going through the final edit I realized I forgot to mentioned browser support and the poly fill that they have for this and the limitations of the polyfill and I thought that'd be very important to mention uh so we're going to dive into that a little bit just because um you can see here is the the poly fill that I have open and we're going to talk about that in a second um but just right now the browser support for scroll timeline is not amazing as you can see here uh it is actually over uh 66% because Chrome just dominates the market basically uh which is pretty crazy it is behind a flag and Firefox as well so it is coming there um but if I come right now and we take a look at this in Firefox it's not working uh these images aren't actually problematic but you can see here nothing's actually happening um over here as well we have an issue and up here I don't have an image so I sort of want to talk a little bit about this and just sort of the ways that you can still use this uh as a progressive enhancement because I think that's currently where it's best used um just to add that little extra for users uh along the way so first of all if you do want to use the polyfill it's really easy to do but there are some limitations to what it can do um You probably don't want to just copy the script and use it from here but I'm going to do that for demo purposes and I'm going to come in my code here and paste it in uh and now if we come to Firefox check this out it it works and so that's kind of nice right um but you'll notice here the animation range end isn't where we' originally wanted it to be uh just because there are a few limitations to the animation range when it comes to using the VI so you might have the images fading up over a different period of time I tried playing around with it I found an issue um with the polyfill that's been filed so it's something that they're aware of but it's just a limitation of the the polyfill I mean see this top area it works really well so that's awesome the only thing with this though is um it has to be inline Styles so what I've actually done here is I've pulled um all of the styles that were relevant to the scroll stuff and I've put those as the things that are inside of my inline style here but interestingly enough is if I were to wrap all of this inside a prefers reduced motion media query it breaks it and it just stops working um and I'm not 100% sure why that is again it might be a bit of an issue with the polyfill because poly you know it is a bit of an experimental um thing that we're playing with here so uh instead of doing that I'm going to save once again and that does break it over here uh and for the most part it's really not that big of a deal uh you know when you have things like this um where there you know I see my image and that's really what we're after uh so I see these images fading in as Progressive enhancement up at the top though there's a problem where I can't see my image and the reason this is happening is because if we go and look at my Styles here we have this uh the animation for my header image is linear and forwards meaning the animation is going to play it's going to do this animation as soon as the page loads it's easy forward so it does the animation it gets to the end of the animation and it stays on the last key frame and the last key frame for that has opacity of zero so whereas my images that we were fading in before were ending in an opacity of one that was perfect CU it's just ending at that point and it's staying there which is exactly what we want uh obviously here though with this forwards it ends at the zero and then that means that I get this which is definitely not what I want to get so the solution that we could do here is to use an at supports and this is a feature query so at supports and do we support an animation timeline of view and if we don't or if we do support it then I'm going to bring all of this in here and of course that has to be for my header image so header image and save that and as long as this is in that at supports Firefox does not support it so Firefox sees that it goes I have no idea what that is so I'm just going to bring in the image like I normally would with no animation on it and you could do this for all of them and just sort of add these scroll animations as a progressive enhancement you could play around with the polyfill as I said for some things you might not be able to get away with it for some things it works really well but if you do want the prefers reduced motion at least with my own experimentation with it uh I was having some issues if you know a way to fix that then uh let us know down in the comments but just that other limitation of the polyfill for now is that the styles do need to be in a style tag on the HTML page and not in an external stylesheet uh from there uh there's definitely some playing around and experimentation you might want to do with this as you're going through all of these different things uh I've tried to make this sort of a crash course to cover most of the different things you'd run into but there's probably a few things I've missed along the way here as well if there's stuff you know about these that I haven't talked about please leave a comment down below uh but if you'd like to see the video on where I created this animation which wasn't scroll Link at the time it was just running um but I made it so it was progressively enhanced so if somebody doesn't have JavaScript or if they're on a screen reader or something like that that everything works perfectly fine but then we're sort of making all those different things come into play uh the way that we need to to so we get sort of that animation going on uh and you can use it for different things it's often with like logos or something right that you have them slowly sliding by anyway if you'd be curious about how I made that the video for it is right here for your viewing pleasure and with that I would like to thank my enablers of awesome web on demand Andrew Simon Tim and Johnny as well as all my other patrons for their monthly support and of course until next time don't forget to make your corner of the internet just a little bit more awesome

Channel: Kevin Powell

Views: 237,767

Keywords: Kevin Powell, css, front-end, frontend, html, web development, css tutorial, tutorial, scroll animation, scroll based animation, css only scroll animation, scroll-timeline, view(), scroll, scroll-timeline view, scroll-timeline scroll, css animation, css animations, fade in on scroll, animate in scroll, css scroll animation

Id: UmzFk68Bwdk

Length: 32min 22sec (1942 seconds)

Published: Thu Dec 21 2023