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 #
- Log in to your WordPress Dashboard.
- Navigate to DiviAnimator → Extensions.
- Locate Image Animation.
- Enable the extension.
- 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.
