Minimal Fade/Slide Scroll Animations In JavaScript & CSS3 – Scroll-Animation

Preview:

Description:

A dead simple and ultra-light (<1kb) scroll animation library built with CSS3, HTML data attributes, and JavaScript IntersectionObserver API.

How to use it:

1. Add references to scroll-animation.css and scroll-animation.js as follows:

<link rel="stylesheet" href="./scroll-animation.css" />
<script src="./scroll-animation.js"></script>

2. Apply scroll animations to elements using the data-san attribute. All possible animations:

• Fade
• Slide Top
• Slide Right
• Slide Left

<div class="box" data-san="slideRight"></div>
<div class="box" data-san="fade"></div>
<div class="box" data-san="slideLeft"></div>
<div class="box" data-san="slideTop"></div>

3. Determine the time to wait before animating the element.

<div class="box" data-san="slideRight" data-san-delay="400"></div>
<div class="box" data-san="fade" data-san-delay="200"></div>
<div class="box" data-san="slideLeft" data-san-delay="600"></div>