Different Setting on Animate on Scroll

Below are the settings that can be used in Animate on Scroll.

<div data-aos="fade-up" data-aos-duration="3000"></div>
<div data-aos="fade-down" data-aos-easing="linear" data-aos-duration="1500"></div>
<div data-aos="fade-right" data-aos-offset="300" data-aos-easing="ease-in-sine"></div>
<div data-aos="fade-left" data-aos-anchor="#example-anchor" data-aos-offset="500" data-aos-duration="500"></div>
<div data-aos="fade-zoom-in" data-aos-easing="ease-in-back" data-aos-delay="300" data-aos-offset="0"></div>
<div data-aos="flip-left" data-aos-easing="ease-out-cubic" data-aos-duration="2000"></div>

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

Share this

Related Posts