Trendy Scroll Shadows Utilizing Scroll-Pushed Animations

Utilizing scroll shadows, particularly for cell units, is a refined little bit of UX that Chris has lined earlier than (certainly, it’s considered one of his all-time favourite CSS tips), by layering background gradients with completely different attachments, we will get shadows which are lined up if you’ve scrolled to the bounds of the aspect.

Geoff lined a newer strategy that makes use of the animation-timeline property. Utilizing animation-timeline, we will tie CSS animation to the scroll place. His instance makes use of pseudo-elements to render the scroll shadows, and animation-range to animate the opacity of the pseudo-elements based mostly on scroll.

Right here’s yet one more method. As an alternative of utilizing shadows, let’s use a CSS masks to fade out the perimeters of the scrollable aspect. This can be a barely completely different visible metaphor that works nice for horizontally scrollable components — locations the place your scrollable aspect doesn’t have a definite border of its personal. This strategy nonetheless makes use of animation-timeline, however we’ll use customized properties as an alternative of pseudo-elements. Since we’re fading, the impact additionally works no matter whether or not we’re on a darkish or gentle background.

First, we’ll outline our scrollable aspect with a masks that fades out the beginning and finish of the container. For this instance, let’s take into account the notorious desk that may’t be responsive and must be horizontally scrollable on cell.

Let’s add the masks. We will use the shorthand and discover the masks as a linear gradient that fades out on both finish. A masks lets the desk fade into the background as an alternative of overlaying a shadow, however you might use the identical method for shadows.

.scrollable {
  masks: linear-gradient(to proper, #0000, #ffff 3rem calc(100% - 3rem), #0000);
}

Defining the customized properties and animation

Subsequent, we have to outline our customized properties and the animation. We’ll outline two separate properties, --left-fade and --right-fade, utilizing @property. Utilizing @property is important right here to specify the syntax of the properties in order that browsers can animate the property’s values.

@property --left-fade {
  syntax: "<size>";
  inherits: false;
  initial-value: 0;
}

@property --right-fade {
  syntax: "<size>";
  inherits: false;
  initial-value: 0;
}

@keyframes scrollfade {
  0% {
    --left-fade: 0;
  }
  10%, 100% {
    --left-fade: 3rem;
  }
  0%, 90% {
    --right-fade: 3rem;
  }
  100% {
    --right-fade: 0;
  }
}

As an alternative of utilizing a number of animations or animation-range, we will outline a single animation the place --left-fade animates from 0 to 3rem between 0-10%, and --right-fade animates from 3rem to 0 between 90-100%. Now we replace our masks to make use of our customized properties and tie the scroll-timeline of our aspect to its personal animation-timeline.

Placing all of it collectively

Placing all of it collectively, we’ve the impact we’re after:

We’re nonetheless ready for some browsers (Safari) to assist animation-timeline, however this gracefully degrades to easily not fading the aspect in any respect.

Wrapping up

I like this implementation as a result of it combines two newer bits of CSS — animating customized properties and animation-timeline — to realize a sensible impact that’s extra than simply ornament. The method may even be used with scroll-snap-based carousels or playing cards:

It really works no matter content material or background and doesn’t require JavaScript. It exemplifies simply how far CSS has come currently.