Animations

Small library to animate elements on your page as you scroll. Read the plugin documentation

How to use

Just set animation using data-aos attribute:

.card.bg-primary.p-4.mb-3.text-white.w-100(data-aos="fade-left")
	| fade-left
.card.bg-primary.p-4.mb-3.text-white.w-100(data-aos="fade-right")
	| fade-right
.card.bg-primary.p-4.mb-3.text-white.w-100(data-aos="fade-up")
	| fade-up
.card.bg-primary.p-4.mb-3.text-white.w-100(data-aos="fade-down")
	| fade-down
.card.bg-primary.p-4.text-white.w-100(data-aos="fade")
	| fade

<div class="card bg-primary p-4 mb-3 text-white w-100 aos-init aos-animate" data-aos="fade-left">fade-left</div>
<div class="card bg-primary p-4 mb-3 text-white w-100 aos-init aos-animate" data-aos="fade-right">fade-right</div>
<div class="card bg-primary p-4 mb-3 text-white w-100 aos-init aos-animate" data-aos="fade-up">fade-up</div>
<div class="card bg-primary p-4 mb-3 text-white w-100 aos-init aos-animate" data-aos="fade-down">fade-down</div>
<div class="card bg-primary p-4 text-white w-100 aos-init aos-animate" data-aos="fade">fade</div></div>

fade-left

fade-right

fade-up

fade-down

fade

For more animation effects visit github.com/michalsnik/aos

Version 2.0.0, [email protected]