---
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-09-15
lang: en
author: "Aditya Sharma"
description: "An image that slides, scales or wipes into place draws the eye far better than one that is simply there when the page loads. The Creative Image widget has a..."
image: https://theplusaddons.com/wp-content/uploads/2026/01/How-to-Add-Image-Animation-in-the-Creative-Image-Widget-1024x538.jpg
word_count: 1068
---

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

## 

- Creative Image widget uses a GSAP-powered Image Animation section, and it requires The Plus Addons for Elementor Pro to be installed and activated.
- Trigger Type offers On Load, On Scroll, and On Hover, with On Scroll firing once at roughly 80% down the viewport unless Enable Scroll Scrub is switched on.
- Transform Effects includes X Offset, Y Offset, Skew X, Skew Y, Scale, Rotation, Opacity, Transform Origin, and Clip Path, while Animation Controls sets Duration at 1.2 seconds and Delay at 0.3 seconds by default.
- Global Image Animations lets the user save an animation in Site Settings and reuse it across widgets, so edits to one row update every widget pointing to that animation.

An image that slides, scales or wipes into place draws the eye far better than one that is simply there when the page loads.

The **Creative Image** widget has a GSAP-powered **Image Animation** section for exactly that. You can build the movement on the widget itself, or reuse an animation you saved once and applied everywhere.

*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 Pro, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/creative-images-for-elementor/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Edition:** **Pro** — Creative Image is only in The Plus Addons for Elementor Pro. With the Pro plugin switched off the widget is not in the editor at all, and a page that already uses it shows nothing where the widget was.- **Widget to enable:** Creative Image, switched on under **The Plus Addons > Widgets** (in the **Advanced** group there). In the Elementor panel it appears under **Plus Advanced**.- **You need an image:** pick one in **Choose Image** first. With nothing chosen the widget renders the plugin's own grey placeholder, so none of the effects below will look like anything.- **Don't use it with Scroll Image:** that effect replaces the picture with a background element, and this animation has nothing left to animate.

## Switch Animation On

- Add the **Creative Image** widget and choose your picture in the **Content** section.- Still on the **Content** tab, open the **Image Animation** section.- Switch **Enable Animation** to **Yes**.- Choose **Basic** to build the movement here, or **Global** to pick one you saved in Site Settings.

![Enable Animation, the Animation dropdown and Trigger Type set to On Load](https://theplusaddons.com/wp-content/uploads/2026/09/creativeimage-anim-enable.webp)

## Basic: Choose When It Runs

**Trigger Type** decides what starts the animation, and it changes what the numbers underneath mean.

| Trigger Type | When it runs | What the Transform Effects values mean |
| ------------ | ------------ | -------------------------------------- |
| **On Load** (default) | Shortly after the page loads, wherever the image is. | Where the image starts, before it settles into place. |
| **On Scroll** | Once, when the widget reaches roughly 80% down the viewport. It does not replay when you scroll back up. | Where the image starts, before it settles into place. |
| **On Hover** | Every time the pointer enters the widget, reversing when it leaves. | Where the image moves *to* while hovered. |

> *That last row catches people out. With **On Load** and Scale 1.25 the image shrinks from 1.25 down to normal. With **On Hover** and the same 1.25 it grows from normal up to 1.25 and back again.*

## Basic: Shape the Movement

**Transform Effects** is a popover switched from **Default** to **Custom**. Inside it you get **X Offset**, **Y Offset**, **Skew X**, **Skew Y**, **Scale**, **Rotation**, **Opacity**, **Transform Origin** and **Clip Path**.

![The Transform Effects popover with X Offset, Y Offset, Scale and Clip Path](https://theplusaddons.com/wp-content/uploads/2026/09/creativeimage-anim-transform.webp)

**Animation Controls** is a second popover, also Default or Custom, holding **Duration** (default 1.2 seconds) and **Delay** (default 0.3).

![The Animation Controls popover with Duration and Delay](https://theplusaddons.com/wp-content/uploads/2026/09/creativeimage-anim-controls.webp)

**Animation Effects** sets the easing curve — **Power1**, **Power2**, **Power3** (default), **Elastic**, **Back**, **Bounce** or **Linear**. **Back** and **Elastic** overshoot the final position before settling, which is what gives them their bounce.

![The Animation Effects dropdown and the Preview Animation button](https://theplusaddons.com/wp-content/uploads/2026/09/creativeimage-anim-effects.webp)

**Play Animation** has a **Preview Animation** button that replays the movement inside the editor.

## Basic: Tie It to the Scrollbar

With **Trigger Type** set to **On Scroll** you also get **Enable Scroll Scrub**. Switch it on and the animation stops being a one-shot: its progress follows the scrollbar, so the image is part-way through the movement while the visitor is part-way down, and it runs backwards when they scroll up.

![The Enable Scroll Scrub switch, shown when Trigger Type is On Scroll](https://theplusaddons.com/wp-content/uploads/2026/09/creativeimage-anim-scrub.webp)

**Duration** and **Delay** stop having an effect in this mode — the scroll sets the pace.

## Clip Path Shapes

**Clip Path** inside **Transform Effects** animates the image into a shape: circles, ellipses, a triangle, diamond, hexagon, star, waves, diagonals, blobs, rounded corners, or **Custom Clip Path** where you paste your own CSS `clip-path` value.

> *The shape is where the animation ends*, and the image stays in it. Pick **Hexagon** and the image finishes as a hexagon and remains one.

## Global: Reuse One Animation Everywhere

- Switch the **Global Image Animations** extension on under **The Plus Addons > Extensions**.- In Elementor, open **Site Settings** and choose **Global Image Animations**.- Add a row, give it an **Animation Name**, and set its trigger, timing and transforms. Save.- Back on the widget, set **Animation** to **Global** and pick your saved animation in **Global Animation**.

![The Animation dropdown set to Global with a saved animation selected](https://theplusaddons.com/wp-content/uploads/2026/09/creativeimage-anim-global.webp)

Every widget pointing at that row picks up your edits, so you can restyle a whole site's image animations in one place.

## How It Behaves

- The animation runs on the **published page**. In the editor, use **Preview Animation** to see it.- With **On Load** and **On Scroll** the image begins fully transparent and fades in as it moves, whatever else you set.- **On Scroll** without scrub runs **once**. Scrolling back up and down again does not replay it.- Choosing **Global** but leaving **Global Animation** empty is harmless — nothing animates.

## Limitations

- **The four *Inset* clip paths hide the image.** Despite the name, **Inset — Top Reveal** and its Bottom, Left and Right siblings end on a fully closed shape, so the image animates itself out of sight and stays gone. Use the circle, polygon or blob shapes instead.- **Preview Animation ignores custom Duration and Delay.** The editor preview always plays at the 1.2 second / 0.3 second defaults. The published page uses your real values, so check timing there.- **Nothing animates when Scroll Image is on.** The animation needs an image tag and Scroll Image removes it. There is no warning in the editor.- **Global without the extension silently falls back to Basic.** If **Global Image Animations** is switched off under Extensions, choosing **Global** plays a default basic animation rather than doing nothing.- The **Global Animation** field's own hint points at a "Global Scroll Interactions" section. The tab you want is called **Global Image Animations**.

## Troubleshooting

### My image disappeared after I set a Clip Path

You have picked one of the **Inset** options. Set **Clip Path** back to **None**, or choose a shape such as **Circle** or **Hexagon**.

### The Global Animation dropdown is empty

Either the **Global Image Animations** extension is off, or you have not added a row yet in **Site Settings > Global Image Animations**.

### The preview looks faster than the real page

That is expected: **Preview Animation** always plays at the default timing. Judge **Duration** and **Delay** on the published page.

### Nothing happens at all

Check **Scroll Image** is off in the **Style** tab, and that you are looking at the published page rather than the editor canvas.

## Related Docs

- [Creative Image Widget: Settings Overview](https://theplusaddons.com/docs/creative-image-widget/)- [How to Add Image Reveal Animation on Scroll in Elementor?](https://theplusaddons.com/docs/add-image-reveal-animation-on-scroll-in-elementor/)- [How to Mask an Image in Elementor? (Custom Image Mask)](https://theplusaddons.com/docs/mask-an-image-in-elementor/)

## Frequently Asked Questions

**Q: Why does the Creative Image widget disappear when the Pro plugin is turned off?**
A: Creative Image is part of The Plus Addons for Elementor Pro, so the widget is only available when the Pro plugin is installed and activated. If it is switched off, the widget is not in the editor and any page that already uses it shows nothing in its place. That matters because the animation section depends on the widget itself being present before any movement, clip path, or scroll behavior can run.

**Q: What should I use if I want one image animation to work across multiple widgets?**
A: Global Image Animations is the right choice when you want one saved animation reused across several Creative Image widgets. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH provides this through Site Settings, where you add a named animation and then pick it from Global Animation on each widget. That setup keeps timing and transforms consistent, so one edit updates every widget pointing to that saved row.

**Q: How does scroll scrub change image animation behavior?**
A: Scroll scrub turns a one-shot scroll animation into a progress-based effect tied to the scrollbar. With Enable Scroll Scrub on, the image moves part-way through the animation as the visitor scrolls part-way down, then runs backward when they scroll up. In this mode, Duration and Delay stop mattering because scroll position becomes the timing source instead of a fixed playback speed.

**Q: Why did my image vanish after I used a Clip Path shape?**
A: The Inset clip paths are designed to close completely, so they can hide the image at the end of the animation. The page calls out Inset - Top Reveal plus Bottom, Left, and Right as shapes that end in a fully closed state. Circle, polygon, blob shapes, or None are safer choices when you want the image to stay visible after the motion finishes.

**Q: Why does Preview Animation look different from the published page?**
A: Preview Animation always plays at fixed editor defaults of 1.2 seconds for Duration and 0.3 for Delay, even if you changed those values. That makes the preview feel faster or slower than what visitors will see on the published page. The real page uses your actual timing settings, so published-page testing is the only way to judge motion speed accurately.

**Q: What causes nothing to happen when I turn on image animation?**
A: The most common blockers are Scroll Image being on or checking only inside the editor canvas. Scroll Image replaces the picture with a background element, so there is no image tag left for animation to move. The page also says On Load and On Scroll begin fully transparent and fade in on the published page, so testing there matters more than editor-only previewing.