Scroll Effects

Scroll Effects with AOS

As front-end developer, a popular request you might get from your clients is to implement stunning animation effects on page scroll. There are many libraries to make this task easier for us. AOS, also called Animate on Scroll, is one such library and it does exactly what its name suggests: it lets you apply different kinds of animations to elements as they scroll into view.

Animations

You have differents animations:

fade
fade-up
fade-down
fade-left
fade-right
fade-up-right
fade-up-left
fade-down-right
fade-down-left

flip-up
flip-left
flip-down
flip-right

slide-up
slide-right
slide-down
slide-left

zoom-in
zoom-in-up
zoom-in-down
zoom-in-left
zoom-in-right
zoom-out
zoom-out-left
zoom-out-right
zoom-out-up
zoom-out-down

Let's check it out:

fade

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis viverra sem non euismod. Proin quis elementum dui. Aenean vitae est dictum, tristique metus quis, pretium elit. Cras id dapibus enim, at condimentum orci. Cras risus tortor, posuere nec semper eu, consequat non erat. Donec a velit eu metus sollicitudin congue. Sed a nibh at sapien dictum ornare. Fusce interdum nulla augue, sed ultrices neque rutrum et. Suspendisse ac finibus massa.

fade-up

fade-down

fade-left

fade-right

fade-up-right

fade-up-left

fade-down-right

fade-down-left

flip-up

flip-left

flip-down

flip-right

slide-up

slide-right

slide-down

slide-left

zoom-in

zoom-in-up

zoom-in-left

zoom-in-down

zoom-in-right

zoom-out

zoom-out-up

zoom-out-left

zoom-out-down

zoom-left-right

You can do it with almost everything like this:

HTML

CSS

Jquery

Python

Java

C++

AOS.JS!