Categories: CSSScriptWeb Design

High-Performance CSS Scroll Animations with MOS.js

MotionOnScroll (MOS) is a JavaScript animate on scroll library that uses the Intersection Observer API to detect when elements enter the viewport and applies CSS transitions to create smooth animations.

Table of Contents

Toggle

Features:

Attribute-Based API: Control animations entirely through HTML data attributes without writing JavaScript.
12+ Animation Types: Includes fade, slide, zoom, flip, rotate, bounce, skew, pop, blur, and shake effects with directional variants.
Intersection Observer: Uses native browser APIs for efficient scroll detection with configurable threshold values.
Zero Dependencies: Runs on vanilla JavaScript with no external libraries required.
CSS Variable Support: Override default timing through CSS custom properties or per-element data attributes.

Use Cases:

Landing Page Sections: Reveal feature sections and testimonials as users scroll down the page.
Portfolio Items: Animate project cards and case study elements into view.
Image Galleries: Create engaging photo grids that fade or slide into position.
Pricing Tables: Stagger animation of pricing tiers for better conversion.
Blog Content: Enhance readability by animating headings and content blocks.

How To Use It:

1. Add the CSS file in your <head> tag and the JavaScript file just before the closing </body> tag.

<link rel="stylesheet" href="/path/to/mos.css">
<script src="/path/to/mos.js"></script>

2. Add the data-mos attribute to any HTML element you want to animate. The value specifies which animation type to use:

fade-up, fade-down, fade-left, fade-right
slide-up, slide-down, slide-left, slide-right
zoom-in, zoom-out
flip-left, flip-right, flip-up, flip-down
rotate-in, rotate-in-right, rotate-zoom
bounce-up, bounce-down
skew-in, skew-out
blur-in, blur-out
pop-in, pop-out
shake
fade-zoom-in, fade-zoom-out
flip-zoom

<div data-mos="fade-up">
  This element fades up when it enters the viewport
</div>

The library automatically observes all elements with the data-mos attribute. When an element becomes visible in the viewport, MOS adds the mos-active class to trigger the animation.

3. You can customize the animation duration and delay using additional data attributes. Both accept values in milliseconds.

<div 
  data-mos="slide-right" 
  data-mos-delay="300" 
  data-mos-duration="1200">
  This slides in from the left after a 300ms delay over 1.2 seconds
</div>

4. Or set default timing values for all animations using CSS variables in your stylesheet.

:root {
  --mos-duration: 0.8s;
  --mos-delay: 0s;
}

Alternatives:

AOS (Animate On Scroll): A more established library with similar functionality, but includes more animation presets and configuration options at the cost of a slightly larger file size.
ScrollReveal: Offers more granular control over animation sequences and timing with a fluent JavaScript API rather than attribute-based configuration.
Locomotive Scroll: Provides smooth scrolling mechanics in addition to animations, but requires more setup and has a steeper learning curve for basic use cases.

Related Resources:

10 Best Scroll-triggered Animation Plugins With JavaScript

FAQs:

Q: Can I trigger animations multiple times as users scroll up and down?
A: The default behavior unobserves elements after the first animation to avoid performance issues.

Q: How do I handle animations on elements that are initially visible above the fold?
A: Elements visible on page load won’t animate because they’re already in the viewport when the observer starts. You can add the mos-active class directly in your HTML for above-the-fold content, or adjust the threshold value and add a negative root margin to the observer configuration. A threshold of 0 with a negative margin triggers animations slightly before elements become fully visible.

Q: Can I chain multiple animations on the same element?
A: Each element can only have one data-mos value at a time. For sequential animations, you’ll need to nest elements with different animation types and use the data-mos-delay attribute to stagger their timing. The outer element animates first, then inner elements animate after their specified delays.

Q: How do I customize the intersection threshold or root margin?
A: The threshold is hardcoded to 0.2 in the JavaScript file. To change it, you’ll need to modify the observer configuration object where it’s instantiated. The observer constructor accepts threshold and rootMargin options. A lower threshold triggers animations earlier, while a negative root margin creates a buffer zone before animations start. You can edit the mos.js file directly or create a custom initialization script that replaces the default observer logic.

The post High-Performance CSS Scroll Animations with MOS.js appeared first on CSS Script.

Lightweight Animation Library for Modern Web – CSS Motion

CSS Motion is a lightweight, framework-agnostic animation library that creates smooth, performant animations triggered by viewport visibility. It works with vanilla JavaScript, React, Svelte, and other frameworks through a CSS-only animation approach that respects user preferences for reduced motion. Features: CSS-Only Animations: Animations run entirely in CSS for optimal performance…

November 11, 2025

In "CSSScript"

ScrollJs: Custom Scroll Animations and Lazy Loading

ScrollJs is a JavaScript library for creating scroll-triggered animations and lazy loading images. It gives you full control over animation styles and works with existing CSS classes or third-party animation libraries like Animate.css. ScrollJs works by using the Intersection Observer API to detect when elements enter or leave the viewport.…

May 3, 2025

In "CSSScript"

Performance-First Scroll Animation Library – WavBlock

WavBlock is a lightweight JavaScript library that creates performant scroll-triggered animations using simple data attributes. Features: Zero-dependency: Written in pure JavaScript with no external library requirements. Intersection Observer: Leverages the browser’s native IntersectionObserver API for efficient, performant scroll detection that doesn’t tank your Lighthouse scores. Declarative syntax: Animation behavior lives…

October 17, 2025

In "CSSScript"

rssfeeds-admin