Animate-Into-View
Using IntersectionObservers and CSS animations to have page elements make grand entrances.
Introduction
Animate-Into-View uses JavaScript Intersection Observers to detect when an element (or set amount of an element) is visible in the viewport and adds a data attribute (or class) which is in turn used to apply CSS animations to the element.
The currently available animations fall into two broad categories:
- Fade-ins: Animates opacity from 0 to 1, and position for all except
fadeIn
(e.g.,fadeInLeft
has the element start off to the left of its final position). - Slide-ins: Animates position only.
Available animations are fadeIn
, fadeInUp
, fadeInDown
, fadeInLeft
, fadeInRight
, slideInUp
, slideInDown
, slideInLeft
, slideInRight
.
There are currently four methods to use Animate-Into-View. See the usage pages in this site for details on how to use each method.
You can see a demo of the recommended method (data attributes) at:
https://doubleedesign.github.io/animate-into-view/demo/demo.html
Accessibility
For users with prefers-reduced-motion enabled, all animations are turned off by default.