Divi 5 Motion System

Create Advanced Animations Inside Divi

Divi Animation helps you design module animations, text reveals, image effects, SVG drawing animations, 3D hover motion, scroll interactions, and custom timelines with visual controls built for Divi 5.

40+Motion Presets
5Animation Extensions
0Lines of Code
Built for Divi 5 Visual Motion Controls No Coding Required SVG Draw Text Flow Timeline Animation
The Toolkit

Meet Divi
Animation

A complete motion system for Divi 5 creators. Every extension is a visual control surface — expand a card to preview the animation behavior it produces.

Seven focused extensions cover entrance motion, text and image effects, SVG drawing, 3D tilt, timelines, triggers, and live preview — all without writing code.

Explore Motion Library
Motion Design Features

One Grid,
Every Effect

A dynamic bento layout pairing a full motion editor with focused, self-demonstrating feature tiles — each one previews the effect it represents.

Animate Any Divi Module

A mini interactive motion editor with a live scroll-animation preview and trigger timeline built right into the builder.

EntranceScroll Interactions Mouse EffectsSticky Motion Hover EffectsCustom Interactions

Text Flow

Animated text splitting preview.

Image Flow

Image reveal demo with wipe transitions.

SVG Draw

SVG path animation on scroll.

Tilt Effect

Interactive 3D hover demo with depth and parallax response.

Interactive Product Demo

Tune It,
Watch It Move

Adjust the visual controls and the live preview responds instantly. This is the same control surface you get inside Divi 5 — timeline, delay, easing, repeat, and trigger.

Visual Controls
Timeline1.0s
Delay0.0s
EasingEmphasized
Repeat
TriggerOn Load
Divi
Preset Library

Ready-Made
Motion

A full library of entrance animations, ready to apply in one click. Drag the rail to browse — hover any preset to preview its motion.

Entrance
Fade In

Smooth opacity fade into view.

Entrance
Fade Up

Rises up while fading into place.

Entrance
Fade Down

Drops down while fading into place.

Entrance
Fade Left

Glides inward toward the left.

Entrance
Fade Right

Glides inward toward the right.

Entrance
Zoom In

Scales up from small to full size.

Entrance
Zoom Out

Settles in from an oversized start.

Entrance
Rotate In

Spins into its final position.

Entrance
Flip X

Flips in on the horizontal axis.

Entrance
Flip Y

Flips in on the vertical axis.

Entrance
Bounce In

Lands with a playful bounce.

Entrance
Elastic In

Springs in with an elastic overshoot.

Entrance
Blur In

Sharpens from a soft blur.

Entrance
Clip Left

Unmasks from the left edge.

Timeline Controls

Motion-Software
Precision

Keyframe tracks, motion curves, and drag handles — the professional timeline workflow, rebuilt natively for the Divi 5 builder.

Opacity
Transform
Scale
Blur
Trigger System

Decide When
Motion Fires

Hover a trigger node to highlight its connected animation path and preview the behavior it produces.

TriggerPage Load
AnimationFade Rise
OutputModule Motion
Page Load plays the animation the moment the page finishes rendering.
Advanced Motion Tools

Go Beyond
Basic Animation

Layer in production-grade motion capabilities — import Lottie, draw along motion paths, and generate animations with AI, all editable live.

Lottie Support
Drop in Lottie JSON animations natively
Motion Path
Animate elements along custom curves
AI Animation Generator
Describe motion and let AI build it
Live Edit
Change values and see motion update instantly
Preview Animation
Play full sequences before publishing
Responsive Motion Controls

Tuned For
Every Screen

Motion scales intelligently across devices — full cinematic depth on desktop, balanced on tablet, and performance-optimized on mobile.

Desktop

Full motion enabled.

Tablet

Balanced motion scaling.

Mobile

Performance-optimized transitions.

Respect Reduced Motion Global Animation Class Reset Settings
Workflow

Four Steps
To Motion

From a blank module to published motion in four moves — the progress line activates each step as you scroll.

1

Choose Extension

Pick the animation extension for the effect you need.

2

Apply Preset

Start fast with a ready-made motion preset.

3

Refine Timeline

Tune duration, easing, delay, and keyframes.

4

Publish Motion

Ship the animation live on your Divi 5 site.

Use Cases

Built For
Real Pages

Hover any card to see it animate using the exact effect it represents.

Hero Sections

Dramatic text reveals that command attention above the fold.

Landing Pages

Scroll-driven motion that guides visitors toward the offer.

Portfolio Layouts

Image parallax and depth that make work feel premium.

Pricing Sections

Hover tilt and reveal motion that highlights plans.

CTA Blocks

Glowing, kinetic calls to action that drive clicks.

Scroll Storytelling

Pinned, sequenced motion that unfolds a narrative.

No. Divi Animation is built to create advanced interactive motion experiences visually inside Divi 5 without coding. Every animation is configured through visual controls — timeline, easing, delay, repeat, and triggers.

Divi Animation is built specifically for Divi 5. Its visual motion controls integrate directly into the Divi 5 builder so you can animate any module natively.

You can design module animations, text reveals, image effects, SVG drawing animations, 3D hover motion, scroll interactions, and custom timelines — covering entrance animations, scroll interactions, mouse effects, sticky motion, hover effects, and custom interactions.

Yes. The trigger system supports Page Load, Scroll Into View, On Click, On Hover, and Always — so you control exactly when each animation fires.

Both. The Preset Library includes Entrance, Scroll, Reveal, Hover, Combo, Text presets, and Image presets you can apply instantly — then refine on the timeline as needed.

Motion is responsive by design — full on desktop, balanced on tablet, and performance-optimized on mobile. It uses GPU-accelerated transforms, lazy-loads animations, and defers non-critical motion.

Yes. Divi Animation respects reduced-motion preferences, supports keyboard navigation and visible focus states, and follows WCAG-compliant contrast with semantic HTML structure.

Absolutely. Advanced Motion Tools add Lottie support, motion paths, an AI animation generator, live editing, and full animation preview for production-grade motion design.

Start Now

Set Your Divi Website
In Motion

Design module animations, scroll interactions, and custom timelines visually — built for Divi 5, with no coding required.