Note: The Animation Controller is a tool available exclusively for Elementor.
The Animation Controller allows you to manage animations for multiple widgets at once, apply timing offsets, and streamline the animation workflow inside the editor. This controller is designed for users who want more precision and efficiency compared to individual widget settings.
To enable the Animation Controller, click its icon in the top-right side:
Quick Select and Animate
The controller includes a quick-select interface that lets you choose any widget on the page and apply animations immediately. After selecting an element, you can assign an animation style, duration, delay, and easing without opening the regular Elementor panel for each widget.
Select Multiple Widgets
You can select multiple widgets with the controller by enabling the Animate Multiple Widgets button.
Now you can click on the widget you want to select and they will appear in a list, where you can remove them individually, reorder or clear all selections at once. This feature is ideal for animating groups of related elements:
Add Stagger Between Widgets
When animating multiple widgets, enabling Delay Between Widgets creates a staggered sequence. Each widget starts its animation slightly after the previous one, producing a smooth cascading effect. This is useful for lists, grids, or any repeated layout structure:
Reset Animations
The controller includes a reset option that clears all applied animations from the selected widgets. This helps you quickly revert changes, rebuild animations from scratch, or remove temporary effects during design.
Auto Apply
By default, animation changes are applied only after clicking Apply. If you want a faster workflow, enable Auto Apply. When active, any changes you make to the animation settings are applied automatically as soon as you adjust a value:
