Animation
Animate all element on scrolling page
| Shortcuts | Render |
|---|---|
.aos-diagonal |
This class applies an animation where the element moves diagonally, combining both horizontal and vertical translations for a dynamic entry effect |
.aos-fade |
This class causes the element to gradually fade in or out, creating a smooth transition where the opacity changes over time |
.aos-flip |
Elements using this class rotate along a specified axis, creating a flip effect that can be horizontal or vertical, adding a playful touch to transitions |
.aos-rotate |
This class animates the element by rotating it, often giving a spinning or turning effect, adding depth to the presentation |
.aos-slide |
This class causes the element to slide into view from a particular direction (left, right, top, or bottom), providing a smooth sliding motion |
.aos-skew |
Elements using this class appear with a skewed or distorted effect as they animate, adding a unique perspective or tilt to the object |
.aos-tilt |
This class tilts the element along one or more axes, creating a subtle or dramatic angled view as part of its animation |
.aos-zoom |
This class creates a zoom effect where the element gradually scales in size, either enlarging or shrinking, to draw attention or provide emphasis |
Animation visibility
Triggering the animation based on the element's visibility threshold
| Shortcuts | Render |
|---|---|
.aos-visible-10 |
Animation triggered when 10% of the element is visible |
.aos-visible-20 |
Animation triggered when 20% of the element is visible |
.aos-visible-30 |
Animation triggered when 30% of the element is visible |
.aos-visible-40 |
Animation triggered when 40% of the element is visible |
.aos-visible-50 |
Animation triggered when 50% of the element is visible |
.aos-visible-60 |
Animation triggered when 60% of the element is visible |
.aos-visible-70 |
Animation triggered when 70% of the element is visible |
.aos-visible-80 |
Animation triggered when 80% of the element is visible |
.aos-visible-90 |
Animation triggered when 90% of the element is visible |
.aos-visible-100 |
Animation triggered when 100% of the element is visible |
Animation settings
Animation display parameters
| Diagonal |
|---|
.aos-diagonal-1 |
.aos-diagonal-2 |
.aos-diagonal-3 |
| Fade |
|---|
.aos-fade-1 |
.aos-fade-2 |
.aos-fade-3 |
| Flip & Rotate |
|---|
.aos-rotate-1 |
.aos-rotate-2 |
.aos-rotate-3 |
Animation settings
Animation display parameters
| Slide |
|---|
.aos-slide-1 |
.aos-slide-2 |
.aos-slide-3 |
| Skew & Tilt |
|---|
.aos-x-1 / .aos-y-1 |
.aos-x-2 / .aos-y-2 |
.aos-x-3 / .aos-y-3 |
| Zoom |
|---|
.aos-zoom-1 |
.aos-zoom-2 |
.aos-zoom-3 |
Animation duration
Increase or decrease the duration of each animation (default 0.5 seconds)
| Shortcuts | Render |
|---|---|
.aos-once |
Triggers animation once only |
.aos-delay-1 |
Animation duration set to 0.3 seconds |
.aos-delay-2 |
Animation duration set to 0.6 seconds |
.aos-delay-3 |
Animation duration set to 0.8 seconds |
Animation timer
Using class .aos-timer- from 1 to X to add an additional timer
| Shortcuts | Render |
|---|---|
.aos-timer-1 |
Triggers animation afer 1 second |
.aos-timer-2 |
Triggers animation afer 2 seconds |
.aos-timer-3 |
Triggers animation afer 3 seconds |
.aos-timer-X |
Triggers animation afer X second (replace X by your value) |