Elementor

You can animate any Elementor section, column, container or widget.

Add an animation

1. Select the element.
2. Open its Advanced tab.
3. Open the AnimateGL section.
4. Pick an animation in Entrance Animation.
5. Adjust the other controls, then update the page.

The Entrance Animation list has None, Default (the site default animation), a CSS group and a WebGL group. With AnimateGL Pro it also has My animations.

Controls

• Direction
• Duration, in milliseconds. The default is 1000.
• Delay
• Distance
• Repeat
• Lock to Scrollbar
• Easing

See Animation settings for what each one does.

Pro controls

With AnimateGL Pro, the AnimateGL section adds more controls for an animated element:

• Start and Element ID or class name. See Triggers and sequences.
• Stagger inner elements (ms) and Split text (CSS animations). See Stagger and text split.
• Animate on mobile, Animate on tablet, Animate on desktop and Play. See Devices and play once.
• While scrolling, Hover effect and Hover image. See Scroll effects and Hover effects.

Use CSS classes instead

You can also add animation classes in Advanced > Layout > CSS Classes. This works for elements that don’t show the AnimateGL section. See CSS classes.