Attributes & Properties
data-aos-easing
This attribute determines the speed curve of the animation effect. Easing
functions specify the rate of change of a
parameter over time and can be used to make the animations feel more natural. These functions are
essentially mathematical formulas that dictate how fast the animation progresses at
each point.
- linear - The animation has the same speed
from start to end
- ease - Default. It starts slow, becomes
faster in the middle
of the
animation, and becomes slow again at the end.
- ease-in - Starts slowly.
- ease-out - Ends slowly.
- ease-in-out - Starts and ends slowly, faster
in
between.
- ease-in-back - Starts backwards and then
animates with
ease-in.
- ease-out-back - Starts at a steady speed,
then animates with
ease-out
backwards.
- ease-in-out-back - Starts backwards,
animates with
ease-in-out, and ends
backwards.
- ease-in-sine, ease-out-sine, ease-in-out-sine
- Sine curve
based easing
functions.
- ease-in-quad, ease-out-quad,
ease-in-out-quad - Quadratic
curve based
easing
functions.
- ease-in-cubic, ease-out-cubic,
ease-in-out-cubic - Cubic curve
based easing
functions.
data-aos-duration
This attribute determines how long, in milliseconds, the animation effect
should last. Values can be Any positive integer (in milliseconds). E.g., 1000 would make the
animation last 1 second.
data-aos-offset
This attribute controls the position where the animation should start. It's
defined as a distance, in pixels, from the
original trigger point (typically when the element first enters the viewport).
- Positive integer - The animation will start
after the element is already inside the viewport by the specified amount of pixels.
- Negative integer - The animation will start
before the element enters the viewport by the specified amount of pixels. Useful if you want
an
animation to start before the element is seen.
data-aos-delay
This attribute adds a delay, in milliseconds, before the animation starts,
once the trigger condition (like entering the
viewport) is met. Values can be Any non-negative integer (in milliseconds). E.g., 500 would add a
half-second delay before the animation starts after
the element enters the viewport.
Example
data-aos="fade-up"
data-aos-easing="ease-out-cubic" sedata-aos-duration="1000"
data-aos-offt="200"
data-aos-delay="500"
Content in a div with these specifications will fade up, starting 200 pixels after it
enters the viewport, with an additional
delay of
500ms, and
the animation will last 1 second with an ease-out-cubic easing.
Anchor Placement
Anchor Element
By default, the element that you want to animate is the "anchor". This means
the animation trigger depends on when this
element enters or exits the viewport.
Optionally, you can specify a different element as the anchor using data-aos-anchor. This allows
another element's
position to determine when the animation is triggered.
Anchor Placement: ata-aos-anchor-placement
This setting determines which part of the anchor element (either the element
itself or another element specified using
data-aos-anchor) should be used in conjunction with the offset to trigger the animation.
It's defined as a combination of two values: one for the anchor element and one for the viewport.
They can be top,
center, or bottom.
The format is anchor-viewport.
-
top-bottom - This is the default. It means
the animation will be triggered when the top of the anchor element reaches the bottom of
the viewport.
-
top-center - Animation triggers when the top
of the viewport meets the center of the element.
-
top-top - Animation triggers when the top of
the viewport meets the top of the element.
-
center-center - The animation will be
triggered when the center of the anchor element is at the center of the viewport.
-
bottom-top - The animation will be triggered
when the bottom of the anchor element reaches the top of the viewport.
-
bottom-center - The animation will be
triggered when the bottom of the anchor element reaches the center of the viewport.
-
bottom-bottom - The animation will be
triggered when the bottom of the anchor element reaches the bottom of the viewport.
