🚀 Lightweight • Zero Dependencies
Beautiful scroll animations made simple. Add stunning motion effects to your website with just a data attribute.
Beautiful scroll animations made simple. Add stunning motion effects to your website with just a data attribute.
MotionOnScroll (MOS) is a lightweight JavaScript library that makes it incredibly easy to add beautiful scroll animations to your web projects. With MOS, you can enhance user engagement and create visually appealing experiences without the need for complex coding or heavy dependencies.
Simply include the MOS CSS and JS files in your project, and add a
data-mos attribute to any HTML element you want to animate. Choose from a variety of animation
types such as fade, slide, zoom, flip, rotate, bounce, skew, pop, and blur effects. Customize the animation
duration and delay using additional data attributes for precise control over the animation behavior.
Whether you're building a portfolio, landing page, or any other web application, MOS provides a simple yet powerful way to bring your content to life with smooth and engaging scroll animations.
Powerful, lightweight, and incredibly easy to use
Built with performance in mind. Zero dependencies, minimal code, maximum impact. Your pages load fast and animate smoothly.
12+ stunning animation types including fade, slide, zoom, and flip effects. Each animation is carefully crafted for smoothness.
Just add a data attribute to any element. No JavaScript knowledge required. Customize delay and duration with simple attributes.
Works perfectly on all devices and screen sizes. Animations adapt to your layout and provide consistent experience everywhere.
Uses modern Intersection Observer API for efficient scroll detection. Animations trigger only when elements are visible.
Control animation duration, delay, and behavior. Override defaults with CSS variables or data attributes for fine-tuned control.
See all available animation types in action
data-mos="fade-up"
data-mos="slide-up"
data-mos="zoom-in"
data-mos="zoom-out"
data-mos="flip-left"
data-mos="flip-right"
data-mos="flip-up"
data-mos="flip-down"
data-mos="rotate-in"
Simple setup, powerful results
<link rel="stylesheet" href="https://motion-on-scroll.netlify.app/mos.css"><script src="https://motion-on-scroll.netlify.app/mos.js"></script>
<div data-mos="fade-up"> Your content here</div>
<div data-mos="fade-up" data-mos-delay="300" data-mos-duration="1200"> Your content here</div>
Have questions? We'd love to hear from you