1. Home
  2. Docs
  3. Animation
  4. Animation Widgets
  5. Image Animation

Image Animation

On the left panel of the Elementor page, look for the “WCF Image” widget under the “WCF” section. Add a container to the specific location of your page and drag the “WCF Image” widget to it.

image animation

Now insert an image into the container by adjusting the resolution and alignment from the “Image” option. Then press on the “Image Animation” option under the “Content” section. 

image animation

As soon as you click, the “Animation” option will appear with a drop-down list. From the list, you can choose a particular type of animation from “Reveal”, “Scale”, and “Stretch” for the image. 

image animation

If you choose “Reveal”, adjust the “Data ease” as well. For the “Scale” animation, you need to set the values of “Start Scale”, and “End Scale” along with the animation starting position.

image animation

Under the “Basic” section of the Elementor widget panel, you can see the “Image”  widget, which will also allow you to add animation to images. Similarly, insert a container and drag the widget to it. 

Attach the image and tap on the “Image Animation”. From the drop-down list located next to “Animation”, choose a particular type of animation.

image animation

From the “Advanced” section of both “WCF Image” and “Image” widgets, you can see another “Animation” option, which lets you incorporate “fade animation” on the images by setting up several parameters.

image animation

Once you complete making your images animated, you can press the “Update” button below the page to save the changes. 

How can we help?