How to Add Image Animation in the Creative Image Widget?

Updated onApril 9, 2026By

Key Takeaways

  • Creative Image widget from The Plus Addons for Elementor allows users to add animation to images.
  • Basic animation options include triggers such as On Load, On Scroll, and On Hover.
  • Global animation enables users to apply the same animation multiple times across different images.
Table Of Content

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.

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

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. 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.

About the Author

Photo of Aditya Sharma CMO of The Plus Addons for Elementor
CMO · The Plus Addons for Elementor · 10 years experience

He has spent years in the WordPress ecosystem building, breaking, and optimizing sites until they actually perform. He works at the intersection of speed, growth, and usability, helping creators ship websites that load fast and convert. An active WordPress community contributor sharing through tools, tutorials, and direct collaboration. Tested practice, not theory.

WordPressElementorn8nAIClaudeAutomationServer
LinkedIn X GitHub YouTube Website
Get Instant Answers to all your questions about The Plus Addons for Elementor, trained on 1000+ Docs and Videos

Related Frequently Asked Questions

What do I need before starting to add image animation in the Creative Image Widget?

You need to have The Plus Addons for Elementor installed and activated to use the Creative Image widget and its animation features.

How do I enable basic animation for an image?

To enable basic animation, add the Creative Image widget, go to the Image Animation tab, toggle on 'Enable Animation', select 'Basic' from the Animation dropdown, and choose a trigger type such as 'On Load', 'On Scroll', or 'On Hover'.

What happens after I complete the animation setup in the Creative Image Widget?

After setting up the animation, you can preview it by clicking the 'Preview Animation' button in the editor, allowing you to see how the animation appears based on your settings.

What options do I have for triggering basic image animations?

For basic image animations, you can set the trigger type to 'On Load', 'On Scroll', or 'On Hover' depending on how you want the animation to be activated.

Is there a way to use the same animation multiple times in the Creative Image Widget?

Yes, by creating a global animation first, you can select it from the Global Animation dropdown, allowing you to apply the same animation to multiple images.

How can I check the animation effect in the editor?

You can check the animation effect by clicking the 'Preview Animation' button after configuring the animation settings in the Creative Image widget.

Last reviewed: April 9, 2026

Related Docs