A simple scroll animation library

A lightweight AOS (animation on scroll) JavaScript library that can be easily integrated into any webpage.

Fade animations

Fade up

data-hs="fade up"

Fade down

data-hs="fade down"

Fade in

data-hs="fade"

Fade right

data-hs="fade right"

Fade left

data-hs="fade left"

Zoom animations

Zoom in

data-hs="zoom-in"

Zoom out

data-hs="zoom-out"

Zoom out + right + up

data-hs="zoom-out right up"

Zoom in + left + up

data-hs="zoom-in left up"

Slide animations

Slide right

data-hs="right"

Slide left

data-hs="left"

Slide up

data-hs="right up"

Slide left up

data-hs="left up"

Flip animations

Flip right

data-hs="flip-right"

Flip left

data-hs="flip-left"

Flip up

data-hs="flip-up"

Flip down

data-hs="flip-down"

Easings

Ease in

data-hs="ease-in"

Ease out

data-hs="ease-out"

Ease in out

data-hs="ease-in-out"

Blur effect

Blur effect

data-hs="ease-in"

Blur effect

data-hs="ease-out"

Blur effect

data-hs="ease-in-out"

Custom animations

Slide right

data-hs="fade zoom-in right up large"
style="--hs-rotate: -45deg; --hs-delay: 200ms"

Custom element

class="my-custom-element"
visibleClass: enter

Callback on enter

Custom event 1

data-hs-call="firstCall"
function firstCall()

I just changed the color and background color

data-hs-call="secondCall"
function secondCall()

Durations

Regular

data-hs=""

Slow

data-hs="slow"

Extra slow

data-hs="extra-slow"

Fast

data-hs="fast"

Extra fast

data-hs="extra-fast"