Reference guide for creating scrolling animations in DiviAnimator.
Requirements #
You need Divi Theme or Divi Builder, DiviAnimator, and the Advanced Animation Extension enabled. Requires Divi 5.
Overview #
Advanced Animation creates entrance and scroll-triggered animations for elements. Choose from animation types like Fade Animation and 3D Move, then configure timing, easing, and trigger behavior.
Applies to: Row and Section elements. Add this extension to a Row or Section to apply animations to that element.
Enabling the Extension #
- Go to DiviAnimator → Extensions in your WordPress admin
- Find Advanced Animation and toggle it on
- Click Save Settings
Once enabled, go to a Row or Section in your page builder. In the Row/Section settings, click the Advanced tab to find Advanced Animation settings. Settings below control the animation type and behavior.
Settings location: Row/Section → Advanced tab → Animation section
Animation Type #
Selects which animation to apply to the element.
| Type | Behavior |
| None | No animation. Extension is disabled. |
| Fade Animation | Opacity-based fade-in from a specified direction. |
| 3D Move | 3D transform movement with rotation and perspective. |
Select None to disable animations temporarily. Fade Animation is lighter weight; 3D Move creates more complex transformations.
Common Settings #
These settings apply to all animation types.
Method #
Defines how the animation starts.
| Method | Behavior |
| From | Element starts at animation end state, animates to final state |
| To | Element starts at final state, animates away on trigger |
From is the standard choice for entrance animations. To is used for exit animations.
Trigger #
Determines when the animation starts.
| Trigger | Behavior |
| On Scroll | Plays when element scrolls into view |
| On Load | Plays when page loads |
| On Click | Plays when element is clicked |
| On Hover | Plays when element is hovered |
On Scroll is most common. On Load plays immediately. On Click and On Hover require user interaction.
Wrapper #
Selects which container element receives the animation.
| Option | Behavior |
| Default | Applies animation to the element itself |
| Custom | Applies animation to a custom selector |
Use Default for most cases. Use Custom if the animation needs to apply to a nested element.
Delay #
Waits before animation starts, in seconds. Range: 0+. Default: 0.
Useful for staggering animations on multiple elements. Set to 0.2 for a 200ms delay, 0.5 for 500ms, etc.
Duration #
How long the animation plays, in seconds. Range: 0.1-5. Default: 0.
Longer duration = slower animation. Typical range: 0.3 to 1.5 seconds.
Ease #
Easing function controls animation speed curve. Options include Power 2 Out, Linear, Ease In, Ease Out, and others. Default: Power 2 Out.
Power 2 Out creates a natural deceleration. Linear is uniform speed. See Easing Functions section for all options.
Fade Animation #
Opacity-based animation that fades element in or out from a specified direction.
Fade From #
Direction the element fades in from.
| Direction | Effect |
| Top | Fades in from above |
| Bottom | Fades in from below |
| Left | Fades in from left side |
| Right | Fades in from right side |
Default: Bottom (common for scroll-based animations).
Fade Offset #
Distance the element travels while fading, in pixels. Range: 0+. Default: 0.
0 = pure fade with no movement. Positive value = element slides while fading. Typical: 20-50px.
3D Move Animation #
3D transform animation with rotation and perspective movement.
Rotation Direction #
Axis around which the element rotates.
| Axis | Effect |
| X Axis | Rotates forward/backward (flips top-to-bottom) |
| Y Axis | Rotates left/right (flips side-to-side) |
| Z Axis | Rotates flat (spins like a wheel) |
Y Axis is most common and feels natural. X Axis creates flipping effects.
Rotation Value #
Degrees of rotation. Range: 0-360. Default: 0.
Positive values rotate clockwise (Y/Z axis) or downward (X axis). Typical: 45-180 degrees.
Transform Origin #
Point around which the rotation occurs. Default centers the rotation.
Leave blank to use element center. Can be customized for off-center rotations.
Easing Functions #
Easing controls how fast the animation moves throughout its duration.
| Easing | Speed Curve | Feel |
| Linear | Constant speed | Mechanical, even |
| Power 1 In/Out | Gentle acceleration | Subtle, smooth |
| Power 2 In/Out | Moderate acceleration | Natural (default) |
| Power 3 In/Out | Strong acceleration | Snappy, quick |
| Power 4 In/Out | Very strong acceleration | Dramatic, punchy |
| Ease In | Slow start, fast end | Anticipation |
| Ease Out | Fast start, slow end | Settling, landing |
Power 2 Out is the default and works for most cases. Try Power 3 Out for snappier animations.
Configuration Examples #
Subtle Fade In (Scroll) #
Gentle fade-in as element scrolls into view.
| Setting | Value |
| Animation Type | Fade Animation |
| Method | From |
| Trigger | On Scroll |
| Wrapper | Default |
| Delay | 0 |
| Duration | 0.8 |
| Ease | Power 2 Out |
| Fade From | Bottom |
| Fade Offset | 30 |
3D Flip on Load #
Dramatic 3D rotation when page loads.
| Setting | Value |
| Animation Type | 3D Move |
| Method | From |
| Trigger | On Load |
| Delay | 0.3 |
| Duration | 1.2 |
| Ease | Power 3 Out |
| Rotation Direction | Y Axis |
| Rotation Value | 180 |
Fade With Stagger #
Multiple elements fade in with staggered delays.
| Setting | First Element | Second Element |
| Animation Type | Fade Animation | Fade Animation |
| Delay | 0 | 0.2 |
| Duration | 0.6 | 0.6 |
| Fade From | Bottom | Bottom |
Increase Delay for each successive element (0, 0.2, 0.4, 0.6) for a cascading effect.
Troubleshooting #
Animation not playing #
Verify the extension is enabled on the Row/Section. Check that Animation Type is not set to None. Verify Trigger condition is met (scroll into view, page load, etc.). Clear browser cache and reload.
Animation plays too fast or too slow #
Adjust the Duration setting. Increase for slower animation, decrease for faster. Try values between 0.3 and 1.5 seconds for most cases.
Element jumps or pops into position #
This usually means animation didn't start properly. Check Trigger is set correctly. Verify Delay is 0 if animation should play immediately. Ensure element is not hidden by CSS display: none.
Animation plays multiple times #
If using On Scroll, element may re-animate when scrolling back up. This is normal. To prevent, use On Load instead. For On Click or On Hover, check if there are multiple click/hover handlers.
Fade From direction not working #
Fade From only works with Fade Animation type, not 3D Move. Verify Animation Type is set to Fade Animation. Check Fade Offset is greater than 0 for visible directional movement.
3D rotation looks flat or invisible #
Rotation Value may be too small. Increase to 90-180 degrees for more visible effect. Check Rotation Direction is set (X, Y, or Z axis). Verify Transform Origin is blank for default centering.
Animation conflicts with other extensions #
Multiple animations on the same element can cause conflicts. If using Cursor Follower or Sticky Elements on the same element, test each individually. Disable other extensions to isolate the issue.
Performance is sluggish #
Reduce Duration or Fade Offset. Disable animations on elements below the fold on slower devices. Check browser performance with Inspector. On mobile, consider using simpler animations (Fade vs 3D).
Easing looks wrong #
Different easing functions create different feels. Try Power 2 Out (default) for most cases. Use Linear for mechanical effects. Use Ease Out for natural settling. Experiment with different easings to find the best feel.
Support #
For issues or questions, contact support@diviexpand.com
© 2026 DiviAnimator. All rights reserved.
