Action Presets are ready-made animations with pre-configured properties, timing, and easing — optimized so you get great-looking results without manual setup. Simply select a preset, and DiviMotion handles the rest. Adjust any setting if you want a different feel.
Use Action Presets when you need a common effect quickly, or as a starting point to customize from.
This guide covers everything you need to know about Action Presets, from basic setup to advanced techniques like stagger, repeat, and Split Text.
How to Add an Action Preset
After adding an interaction to an element, follow these steps:
- In the interaction card, click the + Add Action button.
- Select action presets from the dropdown
- Choose a preset from the list based on the effect you want.
A new Action Card will appear with all settings pre-filled. Click the settings icon to review or adjust them.
| Pro tip: You can add multiple Action Presets to a single interaction. Each preset runs in sequence based on its Start Time, making it easy to chain entrance and exit effects without any custom setup. |
Available Action Presets
DiviMotion includes 16 ready-to-use presets covering the most common animation needs:
| Preset | What It Does | Common Use Case |
| Fade In | Gradually reveals the element by animating opacity from 0 to 1 | Section entrances, text reveals, image loads |
| Fade Out | Gradually hides the element by animating opacity from 1 to 0 | Exit animations, dismissing modals or overlays |
| Slide In Left | Moves the element into view from the left | Navigation panels, sidebar reveals |
| Slide In Right | Moves the element into view from the right | Cards, off-canvas menus |
| Slide In Up | Moves the element into view from below | Content sections on scroll, footer reveals |
| Slide In Down | Moves the element into view from above | Dropdown menus, notification banners |
| Slide Out Left | Moves the element out of view to the left | Dismissing panels, page transitions |
| Slide Out Right | Moves the element out of view to the right | Closing sidebars, exiting modals |
| Slide Out Up | Moves the element out of view upward | Closing banners, exit sequences |
| Slide Out Down | Moves the element out of view downward | Collapsing content, closing drawers |
| Scale In | Grows the element from a smaller size into full view | Cards, images, CTA buttons on scroll |
| Scale Out | Shrinks the element from full size until it disappears | Exit animations, closing overlays |
| Pop In | Scales the element in quickly with a slight overshoot | Badges, tooltips, notification icons |
| Rotate In | Spins the element into view | Icons, decorative elements, logo reveals |
| Bounce In | Enters with a bouncing motion that overshoots and settles | Playful UI elements, game-like interactions |
| Blur In | Appears from a fully blurred state and sharpens into focus | Cinematic entrances, background image reveals |
| Pro tip: Slide In and Slide Out presets come in four directions (Left, Right, Up, Down), giving you full control over how elements enter and exit the viewport without any custom property setup. |
Action Preset Settings
After selecting a preset, DiviMotion automatically configures all the core settings. You can review and adjust any of them using the Action Settings panel.
Action Target
These settings define which element gets animated when the interaction fires. By default, the action inherits the target from the interaction — but you can override it here to animate any element on the page.
Target Type
Choose which element the action should animate:
Inherit from Interaction (Default): Uses the same element selected for the interaction. The safest starting point for most animations.
Element: Animates the element you are currently editing — a section, row, or column.
Element by ID: Targets a specific element anywhere on the page, selected from a dropdown. Useful when the animated element is different from the one you’re editing.
Pro tip: Rename elements using the Admin Label feature to make them easier to find in the dropdown.
Custom Selector: Targets any element using a CSS class or ID selector. This lets you animate elements outside the current context or animate multiple elements sharing the same class.
Scope
Scope determines which related elements receive the animation. This is especially important when using Custom Selector or targeting groups of elements.
| Scope Option | What It Targets | Example Use Case |
| Inherit from Interaction (This Element) | Same element used in the interaction | Default for most animations |
| All Matching Elements | Every element matching the CSS selector | Animate all .card elements on the page |
| This Element | Only the currently selected element | Animate a single section |
| Children | Direct children of the selected element | Animate columns inside a row |
| Descendants | Any nested element (with HTML tag selector) | Animate all <img> tags inside a section |
| Siblings | Elements with the same parent | Animate other columns in the same row |
| Parent | The container holding the selected element | Animate a card wrapper when a child is targeted |
| Next Sibling | The element immediately after | Reveal the next item in a list |
| Previous Sibling | The element immediately before | Slide in the previous testimonial |
Target Multiple Elements
DiviMotion lets you animate multiple elements from a single Custom Action.
| Example: A single scroll trigger fades in a heading AND slides up a paragraph — both configured inside one action. |
To add an additional target, click the + icon below the current target settings. A new target card will appear where you can configure its own Target Type and Scope independently.
Action Name
Assign a descriptive name to your action for easy identification. This is especially helpful when working with multiple actions inside the same interaction.
| Example: “Hero Fade In” or “Card Slide Up” makes it easy to locate and edit specific actions later. |
Duration (s)
How long the animation takes to complete, measured in seconds (s) or milliseconds (ms). The preset default is optimized for its intended effect, but you can change it to suit your design. If you use a smaller value, the animation will feel faster. If you use a larger value, it will feel smoother and slower.
| Example: 0.3s = animation waits 300 milliseconds before playing. |
| Example: Fade In defaults to 0.5s for a crisp, clean entrance. Increase it to 1.2s for a slower, more cinematic reveal on a hero section. |
Start Time (s)
How long DiviMotion waits before starting the animation after the trigger fires, measured in seconds (s) or milliseconds (ms). The default is 0, meaning the animation plays immediately.
| Pro tip: Use incremental Start Time values across multiple actions to create staggered entrance sequences. |
Easing
Easing controls the acceleration curve of your animation — how it speeds up and slows down over time. Each preset automatically selects the easing that best matches its intended feel. You can change the easing at any time if you want a different motion feel.
Auto-selected easing by preset:
| Preset | Auto-Selected Easing | Why This Easing |
| Fade In | Power2–Cubic — Out | Smooth, natural fade that decelerates into full opacity |
| Fade Out | Power2–Cubic — In | Starts steady then accelerates into disappearance |
| Slide In * | Power3–Quart — Out | Strong entry that settles naturally into place |
| Slide Out * | Power3–Quart — In | Gathers speed before exiting, feels intentional |
| Scale In | Power2–Cubic — Out | Grows into view with a satisfying deceleration |
| Scale Out | Power2–Cubic — In | Shrinks away with controlled acceleration |
| Pop In | Back — Out | Overshoots slightly before settling — the defining pop feel |
| Rotate In | Power2–Cubic — Out | Smooth rotation that decelerates to a natural stop |
| Bounce In | Bounce — Out | Lands with the characteristic bounce motion |
| Blur In | Power2–Cubic — Out | Sharpens gradually into focus, cinematic and smooth |
Available Easing Options:
| Easing | What It Feels Like |
| Linear (None) | Moves at a constant speed from start to end |
| Power1 / Quad — In | Starts slow, then speeds up |
| Power1 / Quad — Out | Starts fast, then slows down |
| Power1 / Quad — InOut | Slow at both start and end |
| Power2 / Cubic — In | Slightly stronger slow start |
| Power2 / Cubic — Out | Smooth, natural slowdown |
| Power2 / Cubic — InOut | Smooth start and finish |
| Power3 / Quart — In | Very slow start |
| Power3 / Quart — Out | Strong, smooth finish |
| Power3 / Quart — InOut | Slow start and strong finish |
| Power4 / Quint — In | Dramatically slow start |
| Power4 / Quint — Out | Very smooth, soft end |
| Power4 / Quint — InOut | Dramatic but smooth throughout |
| Sine — In | Gentle slow start |
| Sine — Out | Gentle slow end |
| Sine — InOut | Very soft, natural motion |
| Expo — In | Starts almost still, then surges |
| Expo — Out | Fast entry, then drifts to a stop |
| Expo — InOut | Strong acceleration and deceleration |
| Circ — In | Feels heavy at the start |
| Circ — Out | Feels heavy at the end |
| Circ — InOut | Heavy motion on both sides |
| Back — In | Pulls back slightly before moving forward |
| Back — Out | Overshoots then settles into place |
| Back — InOut | Pulls back and overshoots both ends |
| Elastic — In | Elastic snap at the start |
| Elastic — Out | Elastic bounce at the end |
| Elastic — InOut | Elastic bounce on both ends |
| Bounce — In | Bounces before starting |
| Bounce — Out | Bounces at the end (like a dropped ball) |
| Bounce — InOut | Bounces at both ends |
| Rough | Shaky, uneven motion |
| Steps (5) | Moves in 5 visible stepped jumps |
| SlowMo | Very slow, cinematic motion |
Stagger Animation
Stagger animates multiple child elements sequentially rather than all at once, creating a smooth cascading effect across a group.
| Example: A row of cards fades in one after another instead of all appearing simultaneously. |
Enable Stagger Animation to reveal the following settings:
Stagger Type
Controls how the timing between staggered elements is calculated. Choosing a type reveals its corresponding time setting:
Total Time (s): Distributes the stagger evenly across all elements within a fixed total duration. For example, if Total Time is 2s and there are 4 elements, each one starts 500ms after the previous.
Offset Time (s): Sets a fixed delay between the start of each element’s animation. For example, an Offset Time of 0.15s means each element begins 150ms after the one before it.
Stagger From
Determines which element in the group animates first.
| Option | Which Element Starts First |
| Start | The first element in the group (default) |
| Center | The middle element, then outward |
| End | The last element, then backward |
| Edges | Both ends simultaneously, moving inward |
| Random | A random element each time the animation runs |
Stagger Easing
Controls the pacing of the stagger sequence itself — not the motion of individual elements, but how the timing is distributed across the group. Use it to make the cascade feel faster at the start and slower at the end, or vice versa.
| Note: Stagger Easing is separate from the action’s main Easing setting. Main Easing affects each element’s individual motion curve. Stagger Easing affects the spacing between each element’s start time. |
Repeat Animation
Repeat Animation controls whether the animation plays again after completing and for how many cycles. Enable it to reveal the following options:
Loop Forever
Keeps the animation running continuously without stopping. Useful for loading indicators, looping icons, or decorative motion effects.
Repeat Count
Only available when Loop Forever is disabled. Sets the exact number of times the animation should repeat after its first play. A value of 1 means it plays twice in total.
Repeat Delay (s)
Adds a pause between each repeat cycle. Leave it empty to repeat immediately, or enter a value (e.g., 1.5) to add a 1.5-second pause before each subsequent play.
Reverse on Alternate Repeats
Makes the animation play forward on odd cycles and backward on even cycles — creating a smooth back-and-forth motion instead of snapping back to the start each time.
Example: An element that pulses in and out instead of fading in, jumping back, and fading in again.
| Pro tip: Combine Loop Forever with Reverse on Alternate Repeats and a short Repeat Delay to create smooth, continuous breathing or pulsing effects without jarring resets. |
Animation Properties
Animation Properties define what visually changes during the animation. When you use an Action Preset, DiviMotion automatically selects the appropriate animation property based on the preset you chose.
Auto-selected easing by preset:
- Fade In / Fade Out — automatically uses Opacity
- Slide In / Slide Out — automatically uses Move X or Move Y depending on direction
- Scale In / Scale Out — automatically uses Scale
- Pop In — automatically uses Scale with Back — Out easing
- Rotate In — automatically uses Rotate
- Bounce In — automatically uses Move Y with Bounce — Out easing
- Blur In — automatically uses Blur and Opacity together
Properties are grouped into three categories:
| Category | Properties Included |
| Transform | Move X, Move Y, Move Z, Scale, Scale X, Scale Y, Rotate, Rotate X, Rotate Y, Skew X, Skew Y, Transform Origin |
| Filters | Opacity, Blur, Brightness, Contrast, Grayscale, Hue Rotate, Invert, Saturate, Sepia |
| General | Width, Height, and other CSS-animatable values |
Each selected property appears in the action card with FROM and TO fields where you define its starting and ending values.
| Note: You are not limited to the pre-selected property. Click Animation Properties to add more properties to the preset if you want to combine effects — for example, adding a Move Y to a Fade In to create a fade-and-rise entrance. |
FROM and TO Values
Each preset comes with pre-filled FROM and TO values that define the animation’s starting and ending states. These are optimized for the preset’s intended effect — you don’t need to change them unless you want a different result.
| Approach | How It Works |
| Pre-filled (default) | DiviMotion automatically sets FROM and TO values based on the preset you selected. The animation is ready to use immediately. |
| Customized | You can adjust any pre-filled value to change how the animation starts or finishes. For example, increase the slide distance or change the final opacity. |
| Example: The Pop In preset pre-fills Scale FROM: 0.5 and TO: 1 with Back — Out easing. To make the pop more dramatic, increase the FROM value to 0.2 so the element starts smaller before snapping into place. |
Split Text
Split Text lets you animate text element by element instead of animating the entire block at once.
Choose how to split the text:
• Characters: Each letter animates individually. Great for dramatic letter-by-letter reveals.
• Words: Each word animates as its own unit. Works well for taglines and short headlines.
• Lines: Each line of text animates as a block. Ideal for multi-line body text or staggered paragraphs.
Apply Mask to Split Text
Enable this option to clip the text inside its container while it animates. This prevents letters or words from spilling outside their bounding box during the effect, keeping slide-up and slide-in reveals clean and contained.
| Note: Split Text requires the SplitText integration to be enabled in your DiviMotion Dashboard under Integrations. |
What's Next?
Now that you understand Action Presets, you’re ready to add polished animations to any element in minutes — no manual property configuration required.
Open the Visual Builder, apply a preset to a section, module, or row, and use Start Time and Stagger to sequence multiple presets into a smooth, layered entrance sequence.
