---
title: Advanced Animation
description: "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…"
url: "https://divianimator.com/docs/advanced-animation/"
updated: "2026-09-08"
category: Divi Extensions
---

# Advanced Animation

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**

1. Go to DiviAnimator → Extensions in your WordPress admin
2. Find Advanced Animation and toggle it on
3. 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.