{"id":330,"date":"2024-01-04T15:16:33","date_gmt":"2024-01-04T15:16:33","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=330"},"modified":"2024-01-04T15:16:33","modified_gmt":"2024-01-04T15:16:33","slug":"background-size-zooming-with-scroll-driven-animations","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/background-size-zooming-with-scroll-driven-animations\/","title":{"rendered":"Background Size Zooming with Scroll Driven Animations"},"content":{"rendered":"\n

I’ve seen all the excitement about scroll-driven animations<\/a>. I’m excited too. Animations that use scroll position as a timeline rather than a time-based duration is just a clever idea. It’s something that websites have been using probably-too-much JavaScript for for a long time and it’s nice to see that kind of thing move to CSS where it belongs. <\/p>\n\n\n\n

But I haven’t gotten a chance to play with it directly very much yet. So here I go!<\/p>\n\n\n\n

This all got started because I got a nice email from a reader who had a very specific effect in mind they were trying to replicate on their own website. Somewhat inspired by Chung-Yun Yoo’s website<\/a>, the idea is: images that zoom in (or out) as you scroll.<\/strong> They don’t change dimensions themselves, they just change how much of the image you can see in the space they already occupy. This doesn’t require too much trickery \u2014 you just set the width<\/code>, height<\/code>, and background-size<\/code> and you can affect how much of an <img><\/code> you can see. Changing that background-size<\/code> has the zooming affect.<\/p>\n\n\n\n

This is what we’re after (video):<\/p>\n\n\n\n

Bramus Van Damme has lots of good resources on Scroll-Driven Animations like this article<\/a> and the site scroll-driven-animations.style<\/a>. The tool I found most helpful when trying to figure this out was this View Progress Timeline<\/a> tool. In this tool, you can see how a green box has an animation run only during the time when it’s visible at all in the viewport<\/em>. I was very pleased to have that click for me, as before I saw this I thought that the timelines needed to be the entire scroll-length of the element. Good job, API!<\/p>\n\n\n\n