Learn Animate On Scroll (AOS.js)

Learn Animate On Scroll (AOS.js), Learn to animate in your content as the user scrolls down the website using a Javascript plugin called AOS.

In this mini-course, you’ll learn how to animate your website content as the user scrolls down the page. We’ll start off with an HTML site where we integrate a plugin called Animate On Scroll. First, we’ll set up the plugin using a CDN (Content Delivery Network). This will allow us to explore how AOS works behind the scenes, and also what each of the default configuration options does. When that is done, we’ll then add default AOS animations to our HTML project. Next, we explore how to install AOS using Node’s Package Manager (NPM). To do this, we need a build process, so we’ll go through the steps required to set up a bundler called Parcel on our existing HTML website. This will allow us to then install AOS via NPM and will also allow us to customize AOS’s Sass variables. Once we have Parcel working and have set up AOS via NPM, we then look at what the steps are for creating your own custom AOS animations using CSS. Finally, we’ll integrate these custom animations into our existing project. Once you’ve completed this course, you’ll have the basic understanding required to use AOS in your own web development projects and applications.