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
Free tutorial
Rating: 4.8 out of 5 (5 ratings)
1,782 students
50min of on-demand video
English
English [Auto]

How to install Animate On Scroll using a CDN
How to setup and configure default AOS options
How to install AOS via NPM
How to write a custom AOS animation
How to customize AOS's Sass variables

Requirements

  • Basic HTML
  • Basic CSS
  • Basic Javascript

Description

In this mini-course, you'll learn how to animate in 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 setup 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 do. 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 setup 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 setup 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 in 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.

Who this course is for:

  • In this mini-course, you'll learn Learn Animate On Scroll by building two projects with me. We'll start off with an HTML site where we integrate AOS using a CDN (Content Delivery Network). Then we'll setup a quick build tool/bundler using Parcel, which will allow us to customize AOS's Sass variables. During this course, you'll learn how to integrate AOS in your project, the default settings of AOS, and lastly, we'll write our own custom AOS animation.

Instructor

Frontend Web Development Resources
Pixel Rocket
  • 4.8 Instructor Rating
  • 5 Reviews
  • 1,782 Students
  • 1 Course

Pixel Rocket is run by me, Rob Bell. I'm a self-taught freelance frontend web developer with over 12 years experience. My aim is to help new web developers learn frontend web development skills such as HTML, CSS and Javascript, or to learn new web development frameworks such as Bootstrap, Tailwind, Nuxt.js or Next.js.

Top companies trust Udemy

Get your team access to Udemy's top 15,000+ courses