Skip to main content

ScrollJs Built-in Animation Demo

Explore our built-in CSS animations in action, no setup required! Edit the code below, hit Rerun, and see how each class brings elements to life.

Quick Tips​

  • Open the HTML, CSS, or JS tabs to inspect and modify the demo.
  • Use the Resources tab to view the linked scrolljs.css and ScrollJs library.
  • After any change, press Rerun to preview instantly.

Try These Experiments​

  • Swap scrolljs-fade-in-up for scrolljs-scroll-in-zoom or scrolljs-fade-in-left.
  • Add custom observerOptions when initializing the ScrollObserver() class in the JS panel for different trigger points.
  • Duplicate or add new elements to see how ScrollJs handles multiple targets.

For a complete list of available classes and detailed usage instructions, check out the Built-in CSS Animations Guide. Enjoy animating with ScrollJs! ✨