Super simple scroll animations

Dependency-free intersection observer-based CSS scroll animations package available now.

Posted 15 April 2020   |   Development

Super Simple Scroll Animations Intersection observer-based CSS scroll animations.

Introducing Super Simple Scroll Animations (SSSA), available now on npm. Check out the source code on GitHub and submit any issues you encounter.

It covers the basics of what most scroll-triggered animations require: adding a class to an element when it comes into the viewport and, optionally, removes it when it leaves. It then uses a set of data attributes combined with CSS transitions to achieve the animation.

It also supports triggering animations on child elements when the parent comes into the viewport, instead of individually as each child elements comes into the viewport.

Usage

See the readme for full details on how to use it and browser compatibility, no Internet Explorer unless you add a polyfill.

Alternatives

For a fully featured library you could use AOS but I was trying to keep it as light as possible; SSSA is only 436B compared to AOS’s 4.5kB.

Previous article A small blog