---
title: "How to Add Image Animation in Elementor Image Cascading Widget?"
url: https://theplusaddons.com/docs/add-image-animation-in-elementor-image-cascading-widget/
date: 2026-01-23
modified: 2026-04-09
author: "Aditya Sharma"
description: "Do you want to add image animation in the Elementor Image Cascading Widget? Adding animation to your images is a simple way to make your website look more engaging and..."
image: https://theplusaddons.com/wp-content/uploads/2026/01/How-to-Add-Image-Animation-in-Elementor-Image-Cascading-Widget-1024x538.jpg
word_count: 369
---

# How to Add Image Animation in Elementor Image Cascading Widget?

## Key Takeaways

- The Plus Addons for Elementor includes the Image Cascading widget that allows users to add animation to images.
- The Image Animation tab in the Image Cascading widget features options for Basic and Global GSAP animations.
- Users can trigger animations on page load, page scroll, or mouse hover by selecting from the Trigger Type dropdown.

Do you want to add image animation in the Elementor Image Cascading Widget? Adding animation to your images is a simple way to make your website look more engaging and professional. 

With the Image Cascading widget from The Plus Addons for Elementor, you can easily add animation to your images.

*To check the complete feature overview documentation of The Plus Addons for Elementor Cascading Image widget, [click here](https://theplusaddons.com/docs//cascading-image-widget/).*

***Requirement  - This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/elementor-image-cascading/)

Add the Image Cascading widget to the page and follow the steps.

1. Add the content in the **Image Cascading** tab.

2. Then go to the **Image Animation** tab and enable the **Enable Animation** toggle.

3. After that, from the **Animation **dropdown, you have to select the animation type. 

Here you’ll find the options – 

- **Basic** – With this option, you can add basic GSAP animation on page load, page scroll and on hover to the image.

- **Global** – With this option, you can add a global GSAP animation to the image.

### Use Basic Animation

Select **Basic** from the **Animation **dropdown.

Then, from the **Trigger Type** dropdown, you have to set the trigger. 

Here you’ll find three options – 

- **On Load** - To trigger the animation on page load.

- **On Scroll** - To trigger the animation on page scroll.

- **On Hover** - To trigger the animation on mouse hover.

Select the option as per your requirement.

From the **Transform Effects** section, you can manually set the offset, skew, scale, rotation, opacity, transform origin and add a mask to the image using a clip path.

Then, from the **Animation Controls** section, you can set the animation duration and delay.

After that, you can add an animation effect from the **Animation Effect** dropdown.

By clicking the **Preview Animation** button, you can check the animation in the editor.

Based on your settings, you’ll see the animation.

### Use Global Animation

To add a global animation, you have to [create the global animation first](https://theplusaddons.com/docs/add-global-gsap-animation-in-elementor/#Global-Image-Animations). This allows you to use the same animation multiple times.

Select **Global** from the **Animation **dropdown.

Then, from the **Global Animation** dropdown, select your animation.

## Frequently Asked Questions

**Q: What do I need before starting to add image animation in the Elementor Image Cascading Widget?**
A: You need to have The Plus Addons for Elementor installed and activated to use the Image Cascading widget. This widget allows you to add animation to your images.

**Q: How can I enable basic animation for my images?**
A: To enable basic animation, select Basic from the Animation dropdown in the Image Animation tab. You can then choose a trigger type such as On Load, On Scroll, or On Hover to activate the animation.

**Q: What happens after I complete the steps to add animation to my images?**
A: After completing the steps, you will see the animation applied to your images based on the settings you configured in the Image Cascading widget. You can preview the animation in the editor.

**Q: Is there a way to create a global animation for multiple images?**
A: Yes, you can create a global animation first and then select Global from the Animation dropdown. This allows you to apply the same animation to multiple images easily.

**Q: What options do I have for basic animation effects?**
A: In the basic animation setup, you can select animation effects from the Animation Effect dropdown and manually set parameters like offset, skew, scale, rotation, and opacity in the Transform Effects section.

**Q: What if the animation doesn't appear as expected?**
A: If the animation doesn't appear as expected, check your settings in the Animation Controls section for duration and delay. Ensure you have enabled the animation toggle and selected the correct trigger type.