Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

scrollmoo

MarciCzebe100MIT1.1.11

ScrollMoo is a pure JavaScript-based tool that lets you create high-performance, keyframed scroll animations.

scrollmoo, javascript, animation, scroll, scroll-driven, scrollreveal, scrolltrigger, keyframes, keyframe-animation, reveal-animation, matrix, matrix3d, 3d, 2d

readme

ScrollMoo

ScrollMoo is a pure JavaScript-based tool that lets you create high-performance, keyframed scroll animations. Whether you're a professional web developer or just familiar with HTML, CSS, and JavaScript basics, the simplicity of ScrollMoo will make it easy and enjoyable to create spectacular web animations.

For more information, please visit ScrollMoo.com

Demos

Check out multiple demos on ScrollMoo's website.

Docs

You can find full documentation here.

Installation

You can find detailed installation guide here.

CDN

If you prefer to use a CDN

<script src="https://cdn.jsdelivr.net/npm/scrollmoo@1.1.11/dist/scrollmoo.min.js"></script>

NPM

You can also install it with NPM

npm install scrollmoo

Usage

import ScrollMoo from "scrollmoo"; // NPM

Static Object

Applies the same animation properties to all element(s).

let SM = ScrollMoo({
    ".your-element": {
        markers: true, // only during the development
        keyframes: {
            transform: {
                rotate: {
                    100: "360deg"
                }
            }
        }
    }
});

Dynamic Function

"i" represents the index of each element.

let SM = ScrollMoo({
    ".your-elements": i => ({
        markers: true, // only during the development
        keyframes: {
            transform: {
                rotate: {
                    100: (i + 1) * 45 + "deg"
                }
            }
        }
    })
});

License

MIT

Copyright (c) 2025, ScrollMoo.