Loading...

Animate On Scroll WP

This plugin registers and initializes AOS library to WordPress. The animations are written in the HTML.

Documentation

Fade

Fade up

<div data-aos="fade-up"></div>

Fade down

<div data-aos="fade-down"></div>

Fade right

<div data-aos="fade-right"></div>

Fade left

<div data-aos="fade-left"></div>

Fade up right

<div data-aos="fade-up-right"></div>

Fade up left

<div data-aos="fade-up-left"></div>

Fade down right

<div data-aos="fade-down-right"></div>

Fade down left

<div data-aos="fade-down-left"></div>

Flip

Flip left

<div data-aos="flip-left"></div>

Flip right

<div data-aos="flip-right"></div>

Flip up

<div data-aos="flip-up"></div>

Flip down

<div data-aos="flip-down"></div>

Zoom

Zoom in

<div data-aos="zoom-in"></div>

Zoom in up

<div data-aos="zoom-in-up"></div>

Zoom in down

<div data-aos="zoom-in-down"></div>

Zoom in left

<div data-aos="zoom-in-left"></div>

Zoom in right

<div data-aos="zoom-in-right"></div>

Zoom out

<div data-aos="zoom-out"></div>

Zoom out up

<div data-aos="zoom-out-up"></div>

Zoom out down

<div data-aos="zoom-out-down"></div>

Zoom out right

<div data-aos="zoom-out-right"></div>

Zoom out left

<div data-aos="zoom-out-left"></div>

Different setting examples

Fade up

<div data-aos="fade-up" data-aos-duration="3000"></div>

Fade down

<div data-aos="fade-down" data-aos-easing="linear" data-aos-duration="1500"></div>

Fade right

<div data-aos="fade-right" data-aos-offset="300" data-aos-easing="ease-in-sine"></div>

Fade left

<div data-aos="fade-left" data-aos-anchor="#example-anchor" data-aos-offset="500" data-aos-duration="50></div>

Fade zoom in

<div data-aos="fade-zoom-in" data-aos-easing="ease-in-back" data-aos-delay="300" data-aos-offset="0"></div>

Flip left

<div data-aos="flip-left" data-aos-easing="ease-out-cubic" data-aos-duration="2000"></div>

Anchor placement

Fade up

<div data-aos="fade-up" data-aos-anchor-placement="top-bottom"></div>

Fade up

<div data-aos="fade-up" data-aos-anchor-placement="center-bottom"></div>

Fade up

<div ata-aos="fade-up" data-aos-anchor-placement="bottom-bottom"></div>

Fade up

<div data-aos="fade-up" data-aos-anchor-placement="top-center"></div>

Fade up

<div data-aos="fade-up" data-aos-anchor-placement="center-center"></div>

Fade up

<div data-aos="fade-up" data-aos-anchor-placement="bottom-center"></div>
Cookies help us deliver our services. By using our services, you agree to our use of cookies. More Information