Grab and learn
Modules Tutorials
Modules
Startup
Code editor Setup VScode
Basics
Top Navigation Sticky Navbar Hamburger Collapse Columns 2D transforms 3D transforms Normal card Flip card Scroll bar Progress bar Skill bar Alert Jumbotron Forms Popover Tooltip Background overlay Breadcrumbs Toast Radio buttons Text input Range sliders Dropdown Pagination Modals Color picker Icons Tables
Advanced
Curtain menu Mega menu Toggle sidebar Collapsed sidepanel Full screen navigation Hide navbar on scroll Shrink navbar on scroll Page animation Image magnifier
Animations
Hover animations Parallax Scroll animation Scroll down animated icon Auto typer Carousel Animated icons Particles Smooth scroll Text animations Cube animations
Online website
Domain name Hosting SEO structure Crawling Indexing Canonical links Sitemap Robots.txt Google Search Console Google Analytics
Tutorials
HTML & CSS
Beginners Bootstrap Responsive websites Sass CSS grid CSS flexbox
Javascript
Vanilla JQuery Page animation Async Javascript AJAX Node.js React JS Express
Back

Scroll Animation

The animation on scroll is in fact an animation on a specific element which starts its animation when the element comes in view. In most cases the element comes in view when the user start scrolling. The animation of elements that directly pops up on top of the screen by refreshing the page will start immediately.

Examples
Study
Professional examples
The below stated examples are commonly applied in online website designs. The code is available for you and offers you the possibility to edit it to your own creation!
Animation On Scroll (AOS) library
Effect: fancy
HTML SCSS JS

See the Pen AOS - animations by Snik (@michalsnik) on CodePen.

AOS Animate On Scroll Library
Effect: fancy
HTML CSS JS

See the Pen AOS Animate On Scroll Library by Oltika (@oltika) on CodePen.

Reveal on scroll (AOS library)
Effect: advanced
HTML SCSS JS

See the Pen Reveal Effects on Scroll by Katherine Kato (@kathykato) on CodePen.

Learn how to introduce the Animation On Scroll to your website
The video's below are carefully selected and give you a clear explanation of how you can build this module yourself.
Animate On Scroll Webpage | AOS Library - Traversy Media
In this project we will build a webpage from scratch that uses the AOS (Animate on Scroll) library to implement a fading effect when the page is scrolled
HTML CSS JS
Laxxx.js - An Awesome Scroll Animation Library that's Only 2KB! - DesignCourse
-- Laxxx.js is a robust, yet light weight scroll animation library where you can very quickly and easily animate your UI elements on scroll. Instead of writing a bunch of JavaScript like other alternatives, you use data attribute values in HTML to do the work for you.
HTML SCSS JS
Back

Recommended libraries

AOS.js - A light weight javascript library, which is easy to implement. AOS allows you to animate elements as you scroll down, and up. If you scroll back to top, elements will animate to it's previous state and are ready to animate again if you scroll down. Here you can find the GitHub package with all the extra information.

Lax.js - Simple & light weight (3kb minified & zipped) vanilla javascript plugin to create smooth & beautiful animations when you scrolllll! Harness the power of the most intuitive interaction and make your websites come alive!

Most visited
Setup VS code Sticky navbar 2D transforms Progressbar Curtain menu Hide navbar on scroll Hover animations Parallax Carousel Scroll animation Smooth scroll
Copyright © 2020 sowebsited.com