The Animation Effects extension allows users to add dynamic animations to their Elementor widgets. With a range of customizable animation options, including translation, rotation, scaling, skewing, and opacity effects, users can create engaging, interactive designs that enhance the visual appeal of their websites.
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.
How to enable 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).
Conclusion
The Animation Effects extension empowers users to enhance their website designs with captivating animations, providing an easy-to-use interface for customization.