High-Performance CSS Scroll Animations with MOS.js
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-rightslide-up, slide-down, slide-left, slide-rightzoom-in, zoom-outflip-left, flip-right, flip-up, flip-downrotate-in, rotate-in-right, rotate-zoombounce-up, bounce-downskew-in, skew-outblur-in, blur-outpop-in, pop-outshakefade-zoom-in, fade-zoom-outflip-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;
} 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.
A new trailer for Dragon Ball Super: Beerus has arrived, teasing a look at not…
Bandai Namco has announced Dragon Ball Xenoverse 3 for PC via Steam, PlayStation 5, and…
ABILENE, Texas (KTAB/KRBC) – Abilene City Council Place 4 candidate Tammy Fogle is sharing her…
A new weekend has arrived, and today, you can save big on Apple AirTags, 4K…
Director Joe Russo has confirmed the upcoming Avengers: Endgame re-release will include new footage that…
Cooperative pirate survival game Windrose has reached 1 million copies sold less than a week…
This website uses cookies.