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, hello@getreplacer.com

To spread the power of good design