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.