How to Add Scroll Animations in Bricks Builder (3 Ways, No Code Required)

A scroll animation is any effect that fires as the visitor moves down the page: a headline that fades in when it enters the screen, feature cards that rise one after another, an image that slides into place. Used with restraint, it is the cheapest way to make a site feel deliberately designed. Used everywhere, it makes people wait for content they already scrolled to. This guide covers three no-code ways to get the first outcome, plus a short taste section so you avoid the second.

Way 1: The native Bricks tools (start here)

Bricks gives you two relevant tools out of the box. The first is entrance effects: standard, pick-from-a-list animations (fades, slides, zooms) that play when an element first appears. The second is the Interactions system, which is more flexible: you choose a trigger on an element, such as it scrolling into view, and attach an action: show something, hide something, or apply a CSS class. Between the two, basic reveal-on-scroll behavior is fully covered, at zero cost and zero extra plugin weight.

Where you will eventually feel the ceiling:

• The effects are presets. You pick from a list; you do not design the motion itself.
• Configuring the same reveal on element after element gets repetitive on larger sites.
• Nothing here produces animated backgrounds, text that reveals itself word by word, or effects that follow your scroll position.

That last point deserves a definition, because the terms get mixed up. A scroll-triggered animation plays once when an element enters the screen. A scroll-linked effect moves with the scrollbar: scrub up and down and the motion follows you. The native tools and the CSS method below handle the first kind. For the second, you need method three or a GSAP tool.

Way 2: One small CSS class (free, surprisingly capable)

Under the hood, most reveal-on-scroll effects on the web are the same two-state trick: the element starts invisible and slightly out of place, a class is added when it enters the viewport, and CSS smoothly animates between the two states. You can build exactly that in Bricks without JavaScript, because Interactions can apply a CSS class when an element scrolls into view. Bricks does the toggling, and the CSS does the motion.

Here is the entire stylesheet for a classic fade-up:

/* Start state: invisible, shifted down slightly */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* End state: added when the element scrolls into view */
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

Add reveal to any element you want animated (putting it on a global class keeps it manageable), then set up an interaction that applies is-visible when the element enters the viewport. Done.

Two notes. First, this snippet animates only transform and opacity on purpose: those are the two properties browsers can animate almost for free, without recalculating the page layout. Resist the urge to animate width, height, or margins. That is how sites get janky, and our performance guide explains why. Second, the start state hides the element. If you ever remove the interaction, remove the CSS too, or that element stays invisible forever.

Way 3: Pre-built scroll-reactive elements (no code, no design decisions)

The third road skips both the preset list and the stylesheet: effects that install as native Bricks elements. Bricksfusion's animation library works this way: 97+ effects that appear in your Bricks elements panel like anything else. You drag one onto the canvas and configure it visually from the sidebar: colors, speed, direction, intensity, with a live preview updating as you adjust.

Several of them are built to react to scroll. The visual effects collection includes scroll-reactive treatments for images and sections, and the animated text effects cover the headline-reveal moments that native entrance presets cannot produce. Every effect has a public live demo, so you can judge the actual motion before spending anything.

The trade-off is real: you choose from a curated set rather than inventing motion from scratch. For most sites that is a feature, because the curation is the design skill you are buying.

What about GSAP?

There is a fourth road we deliberately left off the list, because it requires code or code-shaped thinking: GSAP, the professional JavaScript animation library, used in Bricks through tools like Bricksforge or Motion.page. It exists for genuinely advanced choreography: scroll-driven storytelling across many elements, pinned sections, precisely timed sequences. If that is where your project is heading, our complete guide to Bricks animations compares all four approaches honestly.

Which sections actually deserve scroll animation?

The technical part is done. What separates a premium-feeling site from a slot machine is knowing where to stop.

Worth animating:

• Heroes. One clean entrance sets the tone for the whole visit. One, not five elements arriving from five directions.
• Feature reveals. Cards or steps arriving with a slight stagger read as "here is a list, follow along."
• Big standalone moments. Things you want the eye to land on: a key stat, a testimonial, a section-opening headline.

Not worth animating:

• Body text. Paragraphs people came to read should simply be there. Waiting for text is never premium.
• Navigation, forms, buttons. Anything the visitor needs to act on should never play hard to get.
• The hero's main headline behind a long delay. Animate it, fine, but it must feel instant. It is the first thing performance tools measure, as we explain here.

On timing: keep delays short enough that nobody consciously waits, and stagger siblings just enough that the eye registers a direction. A good test is to scroll the page like a bored stranger rather than a proud builder. If you catch yourself waiting for anything, shorten it. And let elements animate once; a reveal that replays every time you scroll past stops being charming by the third pass.

Where to go next

• Page transitions in Bricks: what they are and how to add them
• Will animations slow down your site? A beginner's guide
• The complete guide to animations in Bricks Builder