DIVI 5 MOTION TOOLKIT

Divi Animation Features

Build advanced motion in Divi with 5 powerful extensions — Animator, Image Flow, Text Flow, Tilt Effect, and SVG Draw on Scroll — plus presets, timelines, triggers, and live preview.

Get Divi Animation View Motion Library
Animator Image Flow Text Flow Tilt Effect SVG Draw on Scroll
visual builder · live
Text Flow
MotionMadeForDivi
3D Tilthover motion
SVG Drawscroll-linked path
5 Extensionsone animation plugin
The Ecosystem

5 Powerful Extensions.
One Animation Plugin for Divi.

Divi Animation is built around 5 focused extensions. Each one handles a specific type of motion — so you always have the right tool for the job. Enable or disable individual extensions from the Extensions panel anytime.

01 / Extension

Animator

Universal motion effects for every Divi module — entrance, scroll, hover, and timeline sequences.

Explore Animator 02 / Extension

Image Flow

Scroll-driven reveal animations built specifically for Divi Image modules.

Explore Image Flow 03 / Extension

Text Flow

GSAP timeline-based text animations for Divi Heading and Text modules.

Explore Text Flow 04 / Extension

Tilt Effect

3D perspective tilt on hover for any Divi module — with glow and spotlight effects.

Explore Tilt Effect 05 / Extension

SVG Draw on Scroll

GSAP ScrollTrigger path-drawing animation for any Divi module containing SVGs.

Explore SVG Draw
Enable or disable any extension from the Extensions panel anytime.
Extension 01

Animator

Universal motion effects for every Divi module. Animator gives you full control over entrance animations, scroll effects, hover motion, reveal animations, timeline sequences, stagger, motion path, Lottie integration, and AI-generated animations — all inside the Divi Visual Builder.

Works onEvery Divi module — Sections, Rows, Columns, Text, Image, Button, Blurb, and more

Trigger Types

Page LoadScroll ClickHover AlwaysOn Event

9 Animator controls

ready-made styles

Presets

01

Apply ready-made motion styles in one click.

0:00 — 0:32

Timeline

02

Sequence keyframes with full timing control.

page load · scroll · click

Trigger

03

Fire animations on load, scroll, click, or hover.

sequenced offset

Stagger

04

Offset motion across elements in sequence.

motion path

Path

05

Move modules along a custom motion path.

vector loop

Lottie

06

Drop in looping Lottie vector animations.

ai generated

AI

07

Generate animations with AI assistance.

active effects

List

08

Manage every active effect in one panel.

Duration
Delay
Loop
duration · delay · easing

Settings

09

Fine-tune duration, delay, and easing.

Extension 02

Image Flow

Scroll-driven reveal animations built specifically for Divi Image modules. Image Flow gives you cinematic reveal effects with full control over reveal type, direction, timing, overlay color, and additional motion effects.

Works onDivi Image modules

4 Image Flow controls

ready-made styles

Presets

01

Start from a ready-made reveal style.

Presets (10)

Wipe RightWipe Up Circle RevealRect Reveal Color OverlayDiagonal Zoom RevealZoom + Blur 3D FlipElastic Pop
wipe · clip · circle

Reveal

02

Choose how the image enters into view.

Reveal Types

WipeClip Rect CircleOverlay ZoomDiagonal 3D Flip
fade · scale · blur · rotate

Effects

03

Layer extra motion onto the reveal.

Effects

Fade InScale BlurRotation Movement
scroll into view

Trigger

04

Set when the reveal animation plays.

Trigger Types

Page LoadScroll ClickHover Always
Extension 03

Text Flow

GSAP timeline-based text animations for Divi Heading and Text modules. Text Flow lets you animate text by characters, words, or lines with stagger control and scroll or page-load triggers.

Works onDivi Heading and Text modules

5 Text Flow controls

Fade Up Words Words Rise
Typewriter Typed In
Blur In Sharp Focus
12 text presets

Presets

01

Start from 12 ready-made text animations.

Presets (12)

Fade Up WordsFade Chars Blur InSlide From Left Pop Up CharsDrop In Flip WordsReveal Up TypewriterGlitch In Scale Pop WordsWavy (Loop)
TIMELINE
gsap timeline

Timeline

02

Build text motion on a GSAP timeline — sequence, duration, and easing per step.

Chars MOTION
Words TextFlow
Lines
characters · words · lines

Split

03

Animate by characters, words, or lines.

Split By

CharactersWords Lines
Play
click to play

Trigger

04

Play text motion on the cue you choose.

Trigger Types

Page LoadScroll ClickHover Always
stagger from center

Settings

05

Control stagger origin and timing.

Stagger From

StartEnd CenterRandom Edges
Extension 04

Tilt Effect

3D perspective tilt on hover for any Divi module. Tilt Effect adds depth and interactivity to cards, images, feature boxes, and CTA sections with GSAP-powered motion and glow or spotlight hover effects.

Works onEvery Divi module

Controls

Tilt AmountPerspective Scale On HoverSpeed DirectionReverse Tilt Reset On Leave

Hover Effects

NoneGlow Follow Spotlight

Additional Controls

Glow ColorGlow Size

3 tilt directions

x + y axis

Both

01

Tilts on the X and Y axis together.

y axis only

Horizontal Only

02

Tilts left and right on the Y axis.

x axis only

Vertical Only

03

Tilts up and down on the X axis.

Extension 05

SVG Draw on Scroll

GSAP ScrollTrigger path-drawing animation for any Divi module containing SVGs. Draw SVG paths as visitors scroll the page — with full control over source, position, direction, easing, and stroke styling.

Works onAny Divi module containing SVGs

SVG Source

None (use existing SVG in module) Upload SVG file Paste SVG markup

Position Options

Top LeftTop Center Top RightMiddle Left Middle CenterMiddle Right Bottom LeftBottom Center Bottom RightCustom (Top/Left)

Easing

LinearPower2 Out Power2 InPower2 In-Out Expo OutSine In-Out Back OutElastic

Draw Direction

Forward (start → end) Reverse (end → start)

Additional Controls

Stagger PathsOverride Stroke Color Override Stroke WidthDebug Markers

2 trigger modes

scroll-linked draw

Scrub

01

Draw progress is linked to scroll position — scrubs forward and back.

in view
Played
one-shot on view

Play on View

02

Draws once when the SVG enters the viewport, then holds.

Advanced Motion Tools

Everything You Need
to Animate Divi Websites

Beyond the 5 extensions, Divi Animation gives you a complete set of motion controls that work across every module and layout.

Animation Presets

Apply ready-made animation styles without building every effect from scratch.

Timeline Controls

Fine-tune how each animation starts, moves, repeats, and transitions.

Animation Triggers

Choose when animations play based on page behavior or user interaction.

Stagger

Offset animations across elements for layered, sequenced motion.

Motion Path

Move elements along custom paths for creative, directional animation.

Lottie Animation

Integrate Lottie-based animations directly into Divi modules.

AI Animation Generator

Generate animations with AI to speed up your motion workflow.

Child Selector Targeting

Target specific inner elements for precise animation control.

Animation Settings

Adjust duration, delay, easing, and timing for every animation.

Live Preview

Edit, preview, adjust, and publish your animations with confidence.

Motion Library

A Cinematic Motion Showcase

Animator

Entrance & Reveal Motion

Universal entrance, scroll, and reveal animations applied to any Divi module.

Text Flow

Timeline Text Reveals

Character, word, and line-based text motion with stagger and trigger control.

Image Flow

Cinematic Image Reveals

Wipe, circle, overlay, zoom, diagonal, and 3D flip reveals for Image modules.

SVG Draw on Scroll

Scroll-Linked Path Drawing

Draw SVG paths as visitors scroll, with scrub and play-on-view modes.

Tilt3D hover
Tilt Effect

Interactive 3D Hover

Perspective tilt with glow follow and spotlight effects on hover.

Timeline + Triggers

Scroll-Triggered Storytelling

Sequence motion across the page with timeline controls and motion triggers.

Use Cases

Built for High-Impact Divi Pages

Hero Sections

Landing Pages

Service Sections

Portfolio Layouts

Product Sections

CTA Blocks

Scroll Pages

One Plugin.
Every Page.

FAQ

Divi Animation FAQ

Get Started

Build Better Motion
Inside Divi

5 extensions. Full motion control. Everything inside the Divi Visual Builder.

Get Divi Animation Explore Motion Library