Enable Scroll-Linked Animation Control in Beaver Builder

Beaver Builder’s built-in animations are convenient for one-off effects, but they only trigger once when an element enters the viewport. What if you want animations that play as the user scrolls, creating a more dynamic and engaging experience?

Scroll-linked animations tie animation progress directly to the scroll position. Instead of playing once and finishing, these animations move forward and backward as you scroll up and down the page, creating smooth, responsive effects that feel connected to the user’s actions.

This snippet adds scroll-linked animation timing to any of Beaver Builder’s existing animations. By adding a single CSS class and a few lines of code, you can transform standard animations into scroll-driven effects that respond to the user’s scrolling behavior.

Example

Below is a live demo showing an image with Beaver Builder’s fade-up animation enhanced with scroll-linked timing. As you scroll up and down, watch how the animation progress is tied directly to the scroll position, rather than just playing once.

On to the Code!

Add this CSS to your site’s custom CSS:

/* Scroll based Beaver Builder animations
 * Just add 'scroll-animated' class to an element to enable
 */
@supports (animation-timeline: view()) {
    .fl-animated.scroll-animated {
        opacity: 0;
    }
    .fl-animation.fl-animated.scroll-animated {
        animation-timeline: view();
        animation-range: entry 16px exit 16px;
        animation-fill-mode: forwards;
    }
}

/* Scroll based Beaver Builder animations
 * Just add 'scroll-animated' class to an element to enable
 */
@supports (animation-timeline: view()) {
    .fl-animated.scroll-animated {
        opacity: 0;
    }
    .fl-animation.fl-animated.scroll-animated {
        animation-timeline: view();
        animation-range: entry 16px exit 16px;
        animation-fill-mode: forwards;
    }
}

Then, add the scroll-animated class to any module or element that already has a Beaver Builder animation applied.

Important note: You’ll need to add the animations to each element individually in the Advanced tab. There’s no way to apply this globally to all animations at once.

How It Works

This technique uses CSS Scroll-Driven Animations, a modern CSS feature that lets you control animations based on scroll position. The animation-timeline: view() property ties the animation progress to how far an element is within the viewport.

Here’s what each part does:

• opacity: 0 overrides Beaver Builder’s default opacity: 1, ensuring animations that involve opacity changes start from their initial state
• animation-timeline: view() connects the animation to the scroll position
• animation-range: entry 16px exit 16px defines when the animation starts and ends (16px after entering the viewport, stopping 16px before exiting)
• animation-fill-mode: forwards ensures the animation stays at its end state after completing

The @supports wrapper ensures this only applies in browsers that support scroll-driven animations, so your site won’t break in older browsers (the animations just won’t be scroll-linked). Check browser support for animation-timeline to see which browsers currently support this feature.

Snippet inspired by Digital Church

Looking for scroll-triggered animations with custom CSS? If you need animations that fire once when elements enter the viewport (rather than being tied to scroll position) and want full control over your own custom animations, check out my data-attribute scroll animation snippet.