Backdrop filter CSS property

Overview

Animating the CSS backdrop-filter property is straightforward with TorusKit, as it allows you to animate each sub-property individually. This means you can customize each backdrop-filter sub-property with options like duration, iterations, and more.

Syntax

Syntax for the backdrop-filter property uses the backdrop-filter() keyword with one of the available sub-property. You can define multiple properties, but each must be wrapped in the separate backdrop-filter wrapper.

Examples

The examples below demonstrate how to use various backdrop-filter properties with TorusKit. While these examples use the hover or animate trigger, you can apply any other trigger that is available.

Initial value

Sometimes you need to start the animation, (or just style the element) from certain predefined state - an initial value. Because the TorusKit process the elements before the render, there is no Flash of unstyled content, so the styles are applied immediately after the page load.

Multiple clustered values

Clusters provide a great way to simplify the definition of multiple properties that use the same trigger. In this example, instead of defining the hover trigger separately for both the scale and rotate properties, we group them into a cluster with a single, shared hover trigger. The options defined in the cluster are now shared by all the properties within it.

Discrete timeline

A discrete timeline requires only two values—an initial value (optional) and a final one. This is the simplest way to animate CSS properties. In this example, the blur property is animated to a final value of 3px, with the initial value of 0px being used by default.

Sequenced timeline

A sequenced timeline animates properties in a sequence (series) of steps. When one step finishes, the next one begins. Each step can include one or multiple properties. In this example, we animate the hue-rotate, grayscale, and blue sub-properties sequentially, with each step starting after the previous one completes.

Offset timeline

In an offset timeline, intermediate steps in an animation sequence are defined by percentage offsets. This example demonstrates how to animate the hue-rotate, grayscale, and blur sub-properties with offsets. The first step is used to define the initial values of each properties used in the animation.

In this case, we have omitted the first step with an offset of 0%, which is typically used to set the initial values for all properties. As a result, TorusKit retrieves the initial values from the default settings of each sub-property.

Combination

You can combine different timeline types, even using the same triggers. In this example, we use two animate triggers with different property animations running simultaneously. The animation for the hover trigger is then smoothly applied when you hover over the element.

Properties

The list of available properties for the CSS backdrop-filter.

blur

brightness

contrast

grayscale

hue-rotate

invert

saturate

sepia