Go to athemes.com

Pro Using the Animation Effects Extension

Want to bring your Elementor widgets to life with dynamic animations? The Animation Effects extension in aThemes Addons Pro lets you add translate, rotate, scale, skew, and opacity animations to any widget – giving your pages a polished, interactive feel.

In this guide, we’ll walk you through how to use the Animation Effects extension in aThemes Addons Pro for Elementor.

Table of Contents
  1. Activate the Extension
  2. Enabling Animations
  3. Configuring Animation Options
  4. General animation settings

Before you get started, make sure you’ve installed and activated the aThemes Addons plugin on your WordPress site along with Elementor. This extension requires aThemes Addons Pro.

Activate the Extension

This extension is part of the Premium version of the aThemes Addons for Elementor plugin. To activate it, go to your admin area, visit the aThemes Addons dashboard, search for the extension and click on the switch to activate it. It will now be available in your Elementor interface.

Enabling Animations

Select the widget you wish to animate, go to the Advanced section and find the Animation Settings. Toggle the Animation Switcher to Yes to enable animations for the selected widget.

Configuring Animation Options

After enabling the animation switcher, the following options will be available:

  • Translate:
    • X Translation: Adjust the horizontal translation.
    • Y Translation: Adjust the vertical translation.
    • Duration: Set the duration of the translation animation (in milliseconds).
    • Delay: Set a delay for the translation animation (in milliseconds).
  • Rotate:
    • X Rotation: Adjust rotation along the X-axis.
    • Y Rotation: Adjust rotation along the Y-axis.
    • Z Rotation: Adjust rotation along the Z-axis.
    • Duration: Set the duration of the rotation animation (in milliseconds).
    • Delay: Set a delay for the rotation animation (in milliseconds).
  • Scale:
    • Scale X: Adjust the scaling along the X-axis.
    • Scale Y: Adjust the scaling along the Y-axis.
    • Duration: Set the duration of the scale animation (in milliseconds).
    • Delay: Set a delay for the scale animation (in milliseconds).
  • Skew:
    • X Skew: Adjust the skewing along the X-axis.
    • Y Skew: Adjust the skewing along the Y-axis.
    • Duration: Set the duration of the skew animation (in milliseconds).
    • Delay: Set a delay for the skew animation (in milliseconds).
  • Opacity:
    • Opacity Value: Set the opacity level (0-100%).
    • Duration: Set the duration of the opacity animation (in milliseconds).
    • Delay: Set a delay for the opacity animation (in milliseconds).

General animation settings

  • Direction: Choose the animation direction (Normal, Reverse, Alternate).
  • Easing: Select the easing effect for the animations (Linear, easeInOutSine, easeInOutExpo, etc.).
  • Steps: Define the number of steps for the animation (only applicable if “Steps” easing is selected).

That’s it! You’ve successfully learned how to use the Animation Effects extension in aThemes Addons Pro to add dynamic animations to your Elementor widgets.

Next, would you like to embed audio content on your website? Check out our guide on using the Audio Player widget to learn more.

image_print