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 the aiv-visible 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 three methods to use Animate-Into-View, so here's demos of each:

• Basic HTML and CSS (pre-defined classes)Live demoDemo code
• SCSS (use provided mixins + one pre-defined class)Live demoDemo HTMLDemo SCSS
• JavaScript (use your own selectors + CSS from either of the above methods)Live demoDemo HTMLDemo JS

See the usage pages in this site for details on how to use each method.

Accessibility

For users with prefers-reduced-motion enabled, all animations are turned off by default.