Skip to main content

List of ScrollJs Built-in CSS Animations

Looking to skip the hassle of writing custom animation classes? ScrollJs has your back with a set of built-in CSS animations ready to go out of the box! Just plug and play — and yes, they’re smooth as butter.

✨ Fade-In Animations​

These animations include both motion and opacity for a sleek appearance as elements enter the viewport:

  • scrolljs-fade-in-up
  • scrolljs-fade-in-down
  • scrolljs-fade-in-left
  • scrolljs-fade-in-right
  • scrolljs-fade-in-zoom

🎯 Scroll-In Animations (No opacity change)​

Prefer motion without the fade effect? These do the trick:

  • scrolljs-scroll-in-up
  • scrolljs-scroll-in-down
  • scrolljs-scroll-in-left
  • scrolljs-scroll-in-right
  • scrolljs-scroll-in-zoom

You can use any of these class names as the third argument when calling .observe() to apply them effortlessly.

Want to see how to use them in your project?
Check out the setup guide for detailed steps!