---
title: Image Animation
description: "The Image Animation Extension allows you to add scroll-based animation effects to images within Divi. Create engaging visual experiences with smooth reveal, scale, and stretch effects that respond to user scrolling. # **Requirements** Before using the Image Animation Extension, make…"
url: "https://divianimator.com/docs/image-animation/"
updated: "2026-09-08"
category: Divi Extensions
---

# Image Animation

The Image Animation Extension allows you to add scroll-based animation effects to images within Divi. Create engaging visual experiences with smooth reveal, scale, and stretch effects that respond to user scrolling.

# **Requirements**

Before using the Image Animation Extension, make sure you have:

- Divi Theme or Divi Builder installed and activated
- DiviAnimator installed and activated
- Image Animation Extension enabled

# **How to Enable Image Animation**

1. Log in to your WordPress Dashboard.
2. Navigate to **DiviAnimator → Extensions**.
3. Locate **Image Animation**.
4. Enable the extension.
5. Save your changes.

Once enabled, Image Animation settings will become available in supported Divi modules.

# **Available Animation Effects**

The Image Animation Extension includes the following animation types:

- Reveal
- Scale
- Stretch

Select the animation effect that best suits your design.

# **Reveal Animation**

The **Reveal** effect animates an image into view as the user scrolls through the page.

### **Animation Direction**

Choose the direction from which the image enters:

- Left
- Right
- Top
- Bottom

### **Animation Start**

Controls when the animation begins relative to the viewport.

Available options:

- Top Top
- Top Center
- Top Bottom
- Center Top
- Center Center
- Bottom Top
- Bottom Center
- Bottom Bottom
- Custom

### **Ease**

Choose how the animation moves during playback.

Available easing options:

- Power 1 Out
- Power 2 Out
- Power 3 Out
- Power 4 Out
- Back
- Elastic
- Bounce
- Circ Out

# **Scale Animation**

The **Scale** effect changes the size of an image as users scroll through the page.

### **Play Animation**

Use **Play Now** to preview the effect.

### **Start Scale**

Defines the starting size of the image.

Examples:

- 0 = Hidden
- 0.5 = Half Size
- 1 = Full Size

### **End Scale**

Defines the final size of the image after the animation completes.

### **Animation Start**

Choose when the animation should begin.

Available options:

- Top Top
- Top Center
- Top Bottom
- Center Top
- Center Center
- Bottom Top
- Bottom Center
- Bottom Bottom
- Custom

### **Breakpoint**

Choose where the animation should be active.

# **Stretch Animation**

The **Stretch** effect creates a dynamic stretching animation as the image enters the viewport.

This effect is useful for creating modern, attention-grabbing image transitions.

# **Tips**

- Use **Reveal** for image entrance effects.
- Use **Scale** to create zoom-in or zoom-out animations.
- Use **Stretch** for creative and modern visual effects.
- Combine image animations with scroll-based layouts for more engaging user experiences.
- Preview animations using **Enable On Editor** before publishing.

# **Need Help?**

If you need assistance using the Text Animation Extension, please contact the DiviExpand support team via “support@diviexpand.com”.  We're always happy to help.