Animate On Scroll
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at ullamcorper mauris, vitae imperdiet tortor. Cras aliquet gravida lacus eu auctor
Animate On Scroll
Animate elememts when they enter the viewport with a simple API. Assign <div data-aos="animation_name">
to any element and the it will animate on scroll.
Animation On Scroll
Some quick example text to build on the card title and make up the bulk of the card's content.
Animation On Scroll
Some quick example text to build on the card title and make up the bulk of the card's content.
Animation On Scroll
Some quick example text to build on the card title and make up the bulk of the card's content.
Animation On Scroll
Some quick example text to build on the card title and make up the bulk of the card's content.
<div class = "col-lg-6 my-3">
<div data-aos = "fade-up" data-aos-easing = "ease-in-sine"
data-aos-duration = "600" class = "card border-primary bg-primary mb-3">
<div class = "card-header text-white">fade-up</div>
<div class = "card-body text-white">
<h5 class = "card-title">Animation On Scroll</h5>
<p class = "card-text">Some quick example text to build on the card title and make up the
bulk of the card's content.</p>
</div>
</div>
</div>
<div class = "col-lg-6 my-3">
<div data-aos = "flip-up" data-aos-easing = "ease-in-sine"
data-aos-duration = "600" class = "card border-secondary bg-secondary mb-3">
<div class = "card-header text-white">flip-up</div>
<div class = "card-body text-white">
<h5 class = "card-title">Animation On Scroll</h5>
<p class = "card-text">Some quick example text to build on the card title and make up the
bulk of the card's content.</p>
</div>
</div>
</div>
<div class = "col-lg-6 my-3">
<div data-aos = "slide-up" data-aos-easing = "ease-in-sine"
data-aos-duration = "600" class = "card border-success bg-success mb-3">
<div class = "card-header text-white">slide-up</div>
<div class = "card-body text-white">
<h5 class = "card-title">Animation On Scroll</h5>
<p class = "card-text">Some quick example text to build on the card title and make up the
bulk of the card's content.</p>
</div>
</div>
</div>
<div class = "col-lg-6 my-3">
<div data-aos = "zoom-in" data-aos-easing = "ease-in-sine"
data-aos-duration = "600" class = "card border-danger bg-danger mb-3">
<div class = "card-header text-white">zoom-in</div>
<div class = "card-body text-white">
<h5 class = "card-title">Animation On Scroll</h5>
<p class = "card-text">Some quick example text to build on the card title and make up the
bulk of the card's content.</p>
</div>
</div>
</div>
/* No Changes Made To Default Variables */
/* No Changes Made To Default Javascript */
