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

# How to Add Image Animation in the Creative Image Widget?

## 

- Enables image animation in the Creative Image widget from The Plus Addons for Elementor.
- Offers Basic and Global animation options with GSAP for enhanced visual effects.
- Allows customization of animation triggers, duration, and transform effects for tailored user experiences.

Do you want to add image animation in the Creative Image Widget? Adding animation to your images is a simple yet powerful way to make your website look more engaging and professional. Animated images help grab attention, highlight important content, and bring your design to life. 

With the Creative Image 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 Creative Image widget, [click here](https://theplusaddons.com/docs//creative-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/creative-images-for-elementor/)

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

1. Add the content in the **Content** 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.