How to animate the blur of an image as you scroll?

At a glance

The post describes a way to progressively blur a background image as the user scrolls, using CSS filters and JavaScript. The community members discuss how to implement this in Webstudio, with one member suggesting to add the CSS class and filter properties in the Advanced settings. However, another member cautions that this technique can be resource-intensive and may cause performance issues, especially on large images. The community members request more detailed step-by-step instructions on how to implement this in Webstudio, but there is no explicitly marked answer.

Useful resources

jjd

Doing it raw, you'd just set the filter in css

CSS

filter: brightness(0.75) blur(var(--current-blur, 0px));

And the javascript would be

JavaScript

document.addEventListener("DOMContentLoaded", function() {
  const heroSection = document.querySelector(".hero");
  const heroHeight = heroSection.offsetHeight;

  // We want the blur to go from 0px up to 35px 
  // once we've scrolled the full hero height.
  const maxBlur = 35;

  // Select the .bg container (our pseudo-element is inside it)
  const bg = document.querySelector(".bg");

  window.addEventListener("scroll", () => {
    const scrollY = window.scrollY;

    // 0..1 progress from top of page to bottom of hero
    let progress = scrollY / heroHeight;
    if (progress < 0) progress = 0;
    if (progress > 1) progress = 1;

    const currentBlur = maxBlur * progress;
    
    // We'll store that in a CSS variable for the pseudo-element
    bg.style.setProperty("--current-blur", `${currentBlur}px`);
  });
});

Now, as you scroll, the background image would progressively get blurred. How to do this in webstudio?

4 comments·2 replies

JJohn Siciliano

Exactly like that 🙂 Just add that class to the hero and in advanced properties paste in filter: brightness(0.75) blur(var(--current-blur, 0px));

jjd

what do you mean by add that class to the hero? where do I add it in the Webstudio UI? thanks a lot

JJeremy

Be aware that this can be an expensive operation for the browser. The blur filter repaints the user's scroll and could cause jankyness or scroll lag. This isn't recommended on large images.

For a minor improvement, you can add "will-change: filter" to the element getting blurred, but don't over use it cause it can cause overloading the GPU memory.

jjd

where would i add this? under Advanced?

JJohn Siciliano

In Settings. Here's a short video about Tokens and Classes https://youtu.be/_1QSWHOtk08

jjd

Hey, sorry for sounding dense, but can I trouble you for step by step instructions and full names of the parts of the webstudio app where I need to do this?

Thanks a lot.

Join the Webstudio community

How to animate the blur of an image as you scroll?