Skip to main content

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.

tip

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.