Customize

Fully customizable animations

Animation Settings

Name

Choose default entrance animation or one of the presets

Direction

Choose animation direction left, right, top or bottom

Duration

Duration of the animation in ms

Delay

Delay the start of the animation after the element enters the viewport, useful for creating an animation sequence

Easing

Choose from wide range of available easing functions

Repeat

Play the animation every time the element enters the viewport, by default it plays only the first time

Lock to Scrollbar

Animation progress is based on the element position in the viewport, disabled by default

Elementor

Customize entrance animation in Advanced > AnimateGL section

Gutenberg Block editor

Customize entrance animation in Settings Sidebar > AnimateGL

CSS classes

Each animation can be customized by adding additional CSS classes. Properties that can be customized are duration, delay, easing, translate and rotate.

Here is the list of CSS classes that are used to modify the animation:table

Property	CSS class	Example
Duration	agl-in-duration-{Number}	agl-in-duration-2000
Delay	agl-in-delay-{Number}	agl-in-delay-300
Easing	agl-in-easing-{String}	agl-in-easing-easeOutSine
Translate x	agl-in-translate-x-{Number}	agl-in-translate-x-0.5
Translate y	agl-in-translate-y-{Number}	agl-in-translate-y-2
Translate z	agl-in-translate-z-{Number}	agl-in-translate-z--4
Rotate x	agl-in-rotate-x-{Number}	agl-in-rotate-x-90
Rotate y	agl-in-rotate-y-{Number}	agl-in-rotate-y--45
Rotate z	agl-in-rotate-z-{Number}	agl-in-rotate-z-180

For example, you want to add "Slide left" to an image, and you want to change the animation duration to 2000ms, delay to 300ms and you want to add rotation y from -45 degrees to 0. Here is the CSS class you need to add to an element

agl agl-slideLeft agl-in-duration-2000 agl-in-delay-300 agl-in-rotate-y--45