Modules Sequence Timeline
Sequence Timeline
Turn on Sequence in a row or column and its modules come in one after another, heading, then text, then image, then buttons, with overlap and easing you set once. No delay to work out on each module. This header just played as a sequence on page load.
↓ Scroll down for three example heroes. Each has a Replay button.
Live demo · Pro · Example 1
Split hero: heading, text and image, then buttons
Start: when it scrolls into view · Effect: fade up · Pace: Gentle (1 s steps, 35% overlap). The image has Order 3, so it plays together with the text, and its own effect, Zoom in.
Studio Northlight
Websites that feel alive.
We design and build Beaver Builder sites with motion that guides the eye, never gets in the way.
Live demo · Pro · Example 2
Centred hero with a Text Reveal headline
Effect: mask up · Pace: Cinematic (1.4 s steps, 25% overlap). The headline is a Text Reveal module: its words play at its turn, and the next step waits for them.
Kinetic Modules Pro
One timeline for the whole hero.
Heading, text, image and buttons in the order you choose, at a pace that reads well.
Live demo · Pro · Example 3
Image first, with Beaver Builder's own Animation
Effect: fade from left · Pace: Brisk with 55% overlap and an overshoot easing · Plays every time it scrolls into view. The image keeps its Beaver Builder Animation (Fade left), started by the sequence. The heading blurs in and the buttons wait an extra 0.3 s.
Launch in a weekend.
A brisk pace with plenty of overlap suits short headlines and product launches.
How to use it
Where to find it
Open a row or column, go to its Kinetic tab and switch on Sequence (timeline) → Play modules in sequence. Every module inside becomes a step, in layout order: top to bottom, then the next column.
- Start: when it scrolls into view, or on page load for a hero at the top
- Effect: fade up, fade, fade down, fade from either side, zoom in, blur in or mask up
- Pace: Gentle, Cinematic or Brisk; or set the step duration, overlap and easing yourself
- Start delay, Distance and Play once or every time
To change one step, open that module's Kinetic → Sequence Step: Order (the same number plays together), its own Effect or none, and an Extra delay that can be negative.
Modules with Beaver Builder's Animation (Advanced tab) or a Text Reveal play it at their turn; the sequence sets the timing. A Box counts as one step. Visitors who prefer reduced motion see everything at once, and the builder previews the sequence while you edit. Save a sequence as a preset with the Animation library to reuse it.
Free In the free plugin
- Text Reveal and Image Reveal play when they scroll into view
- Scroll Effects for rows, columns and modules
- Beaver Builder's own Animation, with a delay on each module
Free version coming soon to WordPress.org
Pro Pro adds
- Sequence for rows and columns: one setting plays every module in turn
- Overlap, easing, start delay and three paces
- Per-module order, effect and extra delay
- Beaver Builder Animations and Text Reveals as steps
Kinetic Modules
Make your Beaver Builder sites move.
Start with the free plugin. Add Pro when a project needs the big effects.