Skip to main content

ScrollJs Playground

Welcome to the ScrollJs Playground, a fully interactive space where you can edit code live, test different animation classes, and experiment with ScrollObserver methods in real time.

Tip: Scroll down after the codePen to see instructions and cool things to try!

How to Use the Playground​

  • Tap the HTML, CSS, or JS tab in the embedded CodePen to explore and modify the source code.
  • Click the Resources tab in the CodePen to view any external libraries or assets used such as ScrollJs library and CSS file.
  • Press the Rerun button after editing to preview changes instantly.

Suggested Experiments​

  • Try replacing the manual css animation classes with scrolljs built-in animation classes like 'scrolljs-fade-in-up', 'scrolljs-zoom-in' or 'scrolljs-slide-in-left'.
  • Enable animateOnce: true when initializing the ScrollObserver to test single-play animations.
  • Add more DOM elements and observe how ScrollJs handles multiple animations.

Have fun experimenting, get creative and bring your scroll animations to life! ✨

ScrollJs is yours to bend. Happy coding! 💻🎉