• animation
  • js
  • css

ScrollOut.js - a tiny js library for scroll-based interactions

Since I recently discovered ScrollOut.js, it quickly became one my favourite micro library.

ScrollOut detects changes in scroll for reveal, parallax, and CSS Variable effects! Use JavaScript callbacks, CSS selectors, or CSS Variables to animate elements in and out. You can even create sticky headers.
The ScrollOut library does not handle any animation, but it gives you the elements and tools needed to create animations & transitions with JavaScript animation libraries or only CSS!

The tool itself does not provide any animations/transitions, but CSS Variables that you can hook into.

It's really tiny (1kb minified and gzipped) and the does not make scrolling laggy at all (if used correctly). Oh and it also detects window resizes in case you need that.

I just startet using ScrollOut and I can only imagine the endless possibilities 🤯.

Simple example how to create a auto-hiding header:

ScrollOut applies data-scroll-dir to <html> and changes the value based on scroll direction.

.navbar {
  position: fixed;
  transition: 300ms transform ease-out;
  will-change: transform;
  /*...*/
}
/* scrolling down */
html[data-scroll-dir-y='1'] .navbar {
  transform: translateY(100%); 
}
/* scrolling up */
html[data-scroll-dir-y='-1'] .navbar {
  transform: translateY(0); 
}
Published:
Updated: