This glossary defines common terms you'll encounter when using DiviMotion—whether in the dashboard, builder, documentation, or animations themselves.
A
Action
An action defines what happens when an interaction triggers. Actions can be preset (pre-configured effects like Fade In or Slide Up) or custom (user-defined animations). Each interaction can contain multiple actions to create complex animation sequences.
Action Name
A label you assign to an action to help identify it later, especially when working with multiple actions in complex sequences. Good naming helps you stay organized.
Action Targets
The element(s) that will receive the animation. By default, the current element is targeted, but you can target other sections, rows, columns, or modules on the page.
Animation Properties
Settings that control how elements transform during an animation. Common properties include opacity, position, scale, rotation, and skew. These define the visual changes that occur when an animation plays.
Animation Timeline
A visual timeline for arranging and controlling multiple animations with precise timing. It helps you sequence actions, adjust delays and durations, and coordinate complex animations more easily.
B
Batch Animation
Animating multiple elements simultaneously with a single trigger. Useful for coordinating effects across several sections, rows, or modules at once.
Bezier Curve
A mathematical curve used to create custom easing functions. Bezier curves give you precise control over acceleration and deceleration during animations, allowing for unique motion feels beyond standard easing presets.
Blur
A visual effect that makes elements appear soft or out of focus. Can be animated from sharp to blurred or vice versa for dramatic entrance or exit effects.
Blur In
A preset animation that starts with a blurred element and gradually brings it into sharp focus. Creates a cinematic entrance effect.
Bounce In
A preset animation that moves an element into view with a bouncing effect, creating playful, energetic motion. The element overshoots its final position then settles.
C
Card Deck
A card-based animation effect where multiple cards are arranged and animated as a deck. Useful for interactive showcases, portfolios, and content presentations.
Card Stack
An animation effect where cards overlap and move through a stacked sequence, often based on scrolling or interaction.
Children
Elements directly inside another element (one level deep). When targeting children, animations apply only to immediate child elements, not nested grandchildren.
Click Trigger
An interaction type that triggers animations when users click an element. Commonly used for buttons, images, or interactive sections that reveal content on demand.
Column
A vertical division within a Divi row that holds modules. Columns can be animated individually or as part of row/section animations using any DiviMotion trigger type.
CSS Properties
Advanced layout controls like z-index, overflow, and position that fine-tune how animations interact with page layout. Useful for managing stacking order, clipping behavior, and positioning during complex animations.
Custom Action
A user-defined animation where you manually configure all animation properties from scratch. Unlike presets, custom actions give you complete control over every aspect of the animation.
D
Dashboard
The DiviMotion control center where you manage licensing, enable integrations, access modules and extensions, browse templates, and configure global settings. Access it anytime from DiviMotion → Dashboard in your WordPress admin.
Delay
The amount of time (in seconds) before an animation starts after its trigger fires. Delays help you sequence animations or create staggered effects across multiple elements.
Descendants
All elements inside another element, including nested ones at any depth level. Unlike "children" which only targets immediate children, descendants targets everything nested inside.
Design Tab
The settings panel in Divi's Visual Builder where you configure visual styling like backgrounds, spacing, and borders. The DiviMotion section appears in the Design tab of any section, row, or column settings.
DiviMotion Panel
The animation controls section within Divi's Design tab where you create and manage all animations for an element. Access it by opening any section, row, or column settings and navigating to Design → DiviMotion.
Duration
How long an animation takes to complete, measured in seconds. Shorter durations create snappy effects, while longer durations feel more gradual and smooth.
DrawSVG
A GSAP-powered SVG animation effect that makes SVG paths appear as if they are being drawn in real time. Commonly used for logos, icons, lines, and illustrations.
E
Easing
The acceleration curve that controls how an animation progresses over time. Easing functions determine whether animations start slow and speed up (ease-in), start fast and slow down (ease-out), or have custom acceleration patterns.
Extensions
Optional add-ons like preloaders, advanced timelines, or scroll progress indicators that expand DiviMotion's animation capabilities beyond Divi or WordPress defaults.
Extensions Tab
A Dashboard tab that provides access to advanced animation tools beyond Divi's default capabilities, such as page preloaders, advanced timeline sequencing, or scroll progress indicators.
Elastic Cards
An interactive card effect that uses elastic or spring-like motion to create more responsive and playful card animations.
F
Fade In
A preset animation that makes elements appear gradually from invisible (opacity 0) to visible (opacity 1). One of the most commonly used entrance effects.
Fade Out
A preset animation that makes elements disappear gradually from visible (opacity 1) to invisible (opacity 0). Often used for exit animations or removing elements smoothly.
Filters
A category of animation properties that includes visual effects like opacity, blur, brightness, contrast, and saturation. Filters let you create dramatic visual transformations.
FROM
The starting state of an animation in GSAP terminology. Defines what property values an element begins with before animating to its final state.
G
Global Overview Panel
A centralized view that displays every animation currently active on the page. Use it to quickly locate, edit, or manage animations across your entire layout—especially helpful on complex, animation-heavy pages with 5+ animations.
GSAP
GreenSock Animation Platform—the industry-standard JavaScript animation library that powers DiviMotion. GSAP provides high-performance, professional-grade animations with precise control and broad browser compatibility.
Gravity Box
A physics-based animation module that turns elements into objects affected by gravity, collision, bounce, and movement. Users can also interact with and move the elements.
H
Hover Trigger
An interaction type that triggers animations when users hover their mouse over an element. Perfect for button effects, image reveals, and interactive navigation elements.
Horizontal Scroll
A DiviMotion extension that converts vertical scrolling into horizontal movement, allowing sections or content to move sideways as users scroll.
I
Integrations
Built-in GSAP-powered features like ScrollTrigger, SplitText, or ScrollSmoother that can be enabled or disabled from the dashboard. Only enabled integrations load on your site, optimizing performance.
Integrations Tab
A Dashboard tab where you enable or disable specific GSAP-powered animation features. Only enabled integrations load on your site, keeping performance optimized and pages loading fast.
Interaction
An interaction defines when your animation triggers. DiviMotion offers four trigger types: Scroll, Hover, Click, and Load. Each interaction acts as a container that can hold multiple actions for creating complex sequences.
Interaction Card
The expandable UI container in the DiviMotion panel that displays an interaction and its associated actions. The card header shows the trigger type and includes controls to reorder, duplicate, or delete the interaction.
K
Keyframe
A specific point in an animation timeline where property values are defined. Complex animations use multiple keyframes to create sophisticated multi-step effects.
L
License Activation
The process of validating your DiviMotion purchase by entering your license key. Required to receive automatic updates, access templates, and unlock premium features.
Load Trigger
An interaction type that triggers animations automatically when the page loads. Useful for entrance animations, hero section effects, or attention-grabbing elements that should animate immediately when visitors arrive.
Loop
Repeats an animation continuously or a specific number of times. Useful for attention-grabbing elements, loading indicators, or decorative effects that need constant motion.
M
Markers
Visual debugging tools that show trigger points, scroll positions, and animation ranges in the Visual Builder. Markers help you understand exactly when and where scroll-based animations will fire.
Module
A Divi building block like buttons, text, images, or forms. DiviMotion can animate modules through parent sections, rows, or columns, or by targeting specific modules directly.
Modules Tab
A Dashboard tab showcasing purpose-built animation components that extend Divi's default modules, such as animated buttons, image reveals, or SVG drawing tools.
Morphing
The smooth transformation of one shape into another. SVG morphing animates path data to create fluid shape transitions, commonly used for icons, logos, or decorative elements.
O
Offset
Adjusts when a scroll trigger fires relative to the viewport. Positive offsets delay the trigger, while negative offsets fire it earlier, giving you precise control over animation timing.
Opacity
Controls the transparency of an element, ranging from 0 (completely invisible) to 1 (fully visible). Opacity is one of the most commonly animated properties, used for fade-in and fade-out effects.
P
Parallax
A scrolling effect where background and foreground elements move at different speeds, creating an illusion of depth. Parallax adds visual interest and can make flat designs feel more dimensional.
Perspective
A CSS property that adds 3D depth to animations by defining how far the viewer is from the 3D space. Essential for creating realistic 3D rotation and transform effects.
Pin
Keeps an element fixed in position while other content scrolls past it. Pinning is useful for sticky headers, progress indicators, or elements that should remain visible during scroll animations.
Play Animation Button
A preview control in the DiviMotion panel that lets you test animations in real-time without saving or publishing. Located to the right of the + Add Action button, it provides instant feedback for animation adjustments.
Preset
A pre-configured animation effect with optimized default values. Presets include common effects like Fade In, Slide Up, Scale, Rotate, Blur In, Bounce In, and more, making it easy to add professional animations without manual configuration.
Preloader
A loading animation shown before the page content appears. It helps create a smoother transition while the page or animation-heavy content loads.
R
Reverse
Plays an animation backward, returning elements to their starting state. Useful for hover effects that should reverse on mouse-out or click toggles that switch between states.
Rotate
Spins or tilts an element around its transform origin. Rotation is measured in degrees (0-360) and can create spin effects, tilted elements, or flip animations.
Row
A horizontal container within a Divi section that holds columns. Rows structure your layout and can be animated using any DiviMotion trigger type, with effects cascading to child columns if desired.
S
Scale
Changes the size of an element proportionally or on individual axes. Scale values above 1 make elements larger, while values below 1 make them smaller. A scale of 0 makes an element invisible.
Scope
Defines how animations affect child elements or related items. Scope settings determine whether an animation applies only to the targeted element or cascades to its children and descendants.
Scrub
Links animation progress directly to scroll position, allowing users to "scrub" through an animation by scrolling. Unlike triggered animations that play once, scrubbed animations move forward and backward as users scroll up and down.
Scroll Trigger
An interaction type that triggers animations based on scroll position. Scroll triggers can fire when an element enters the viewport, reaches a specific scroll percentage, or exits the screen.
ScrollSmoother
A GSAP-powered integration that adds fluid, momentum-based scrolling to your entire site, creating a premium, buttery-smooth scroll experience.
ScrollTrigger
GSAP's scroll animation engine that powers DiviMotion's scroll-based effects. ScrollTrigger handles scroll detection, trigger points, and performance optimization for scroll animations.
Scroll Video
A module that connects video playback to page scrolling. Scrolling forward moves the video forward, while scrolling back can reverse the playback.
Section
The largest structural container in Divi's layout system. Sections hold rows and columns, and can be animated using DiviMotion's scroll, hover, click, or load triggers. Section animations can cascade to all child elements.
Sequence
A series of animations that play in order, one after another. Sequences use delays and multiple actions to create complex, multi-step animation effects.
Skew
Distorts an element by slanting it along the X or Y axis, creating a perspective or shearing effect. Skew is measured in degrees and can add dynamic motion to animations.
Slide In
A preset animation that moves an element into view from off-screen (left, right, top, or bottom). Creates a smooth entrance effect commonly used for panels, menus, or content reveals.
Slide Out
A preset animation that moves an element out of view off-screen. The reverse of Slide In, often used for exit animations or hiding content.
SplitText
A GSAP integration that allows you to animate text by individual characters, words, or lines—often used for dramatic headline animations or typewriter effects.
Stagger
Delays the start time of animations across multiple elements, creating a cascading or wave effect. Stagger is commonly used for lists, grids, or groups of elements that should animate in sequence rather than simultaneously.
T
Target
Specifies which element an action should animate. By default, actions target the current element, but you can target other sections, rows, columns, or modules anywhere on the page.
Templates Tab
A Dashboard tab that links to a library of pre-designed animation layouts and sections. Use templates to quickly launch animated pages or learn by example how complex effects are built.
Timeline
A sequence of animations that play in order with precise timing control. Timelines can coordinate multiple elements and actions, creating complex choreographed effects across your entire page.
TO
The ending state of an animation in GSAP terminology. Defines what property values an element should reach after animating from its starting state.
Transform
An umbrella term for animations that change an element's position, scale, rotation, or skew. Transforms are GPU-accelerated for optimal performance and smooth animations across all devices.
Transform Origin
The pivot point around which transformations like rotation and scale occur. By default, elements transform from their center, but you can change the origin to any position (top-left, bottom-right, etc.).
Translate
Moves an element horizontally (X-axis) or vertically (Y-axis) from its original position. Translate is measured in pixels or percentages and is the primary method for creating movement animations.
Trigger
The event that starts an animation. DiviMotion supports four trigger types: Scroll (based on scroll position), Hover (mouse-over), Click (user click), and Load (page load). Each trigger type has unique settings for controlling animation behavior.
Tween
A single property animation that transitions a value from a start state to an end state. Tweens are the building blocks of more complex animations in GSAP.
V
Viewport
The visible portion of the browser window. Scroll triggers often fire when elements enter, exit, or reach specific positions within the viewport, giving you precise control over when animations play.
Visual Builder
Divi's drag-and-drop page editor where you design pages and configure DiviMotion animations. All DiviMotion controls are integrated directly into the Visual Builder's Design tab, so you never leave your workflow.
W
Width
Controls how wide an element is. Can be animated to create expand/collapse effects, reveals, or responsive size changes.
X
X-axis
The horizontal axis in animations. Moving along the X-axis translates elements left (negative values) or right (positive values).
Y
Y-axis
The vertical axis in animations. Moving along the Y-axis translates elements up (negative values) or down (positive values).
Yoyo
Makes an animation play forward, then backward, then forward again—creating a back-and-forth effect. Often used with loops for continuous motion or bounce effects.
What's Next?
Now that you're familiar with DiviMotion terminology. Have questions about a term not listed here? please contact our support team at [email protected]
