Installation on ScrollMoo

Download

You can download it, directly from GitHub.

<script src="path/to/scrollmoo.min.js"></script>

Copied!

CDN

If you prefer to use a CDN

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

Copied!

NPM

You can also install it with NPM

npm install scrollmoo

Copied!

Usage

Include the ScrollMoo <script> tag just before the closing </body> tag. Right below it, you can add your ScrollMoo code directly inside of a <script> tag or load it from an external JS file.

Note: If you are using ScrollMoo as a module, don't forget to add the type="module" attribute to your <script> tag. Now you can import ScrollMoo refer to some common option below. Learn more of module importing

import ScrollMoo from "./dist/scrollmoo.esm.min.js"; // Locally

Copied!

import ScrollMoo from "https://cdn.jsdelivr.net/npm/scrollmoo@1.1.11/+esm"; // CDN

Copied!

import ScrollMoo from "scrollmoo"; // NPM

Copied!

Static Object

Applies the same animation properties to all element(s). For the minimum requirements, refer to the code below.

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

Copied!

Dynamic Function

Function takes an argument "i", which represents the index of each element. For the minimum requirements, refer to the code below.

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

Copied!

.your-element is the CSS selector for the element(s) to animate. See more element selection
markers gives visual help during the developement. See more animation configuration
keyframes defines the CSS properties and their steps in the animation timeline.See more animation configuration
transform specifies the transformation type (e.g., rotate). See more prepared CSS properties

Try it

Simply open your favorite online code editor, paste the code, or run it locally. Check out the demo pages to see comprehensive examples of how ScrollMoo works.

Static Object

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic demo - ScrollMoo</title>
    <style>
        .box {
            width:100px;
            height:100px;
            background:#FF5349;
            position:fixed;
            top:100px;
        }
    </style>
</head>
<body style="height:200vh">
    <div class="box"></div>
    <script src="https://cdn.jsdelivr.net/npm/scrollmoo@1.1.11/dist/scrollmoo.min.js"></script>
    <script>
        let SM = ScrollMoo({
            ".box": {
                keyframes: {
                    transform: {
                        rotate: {
                            100: "360deg"
                        }
                    }
                }
            }
        });
    </script>
</body>
</html>

Copied!

Dynamic Function

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic demo - ScrollMoo</title>
    <style>
        .box {
            width:100px;
            height:100px;
            background:#FF5349;
            border-top:2px solid #000;
        }
    </style>
</head>
<body style="height:200vh">
    <div style="position:fixed">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/scrollmoo@1.1.11/dist/scrollmoo.min.js"></script>
    <script>
        let SM = ScrollMoo({
            ".box": i => ({ 
                keyframes: {
                    transform: {
                        rotate: {
                            100: (i + 1) * 45 + "deg"
                        }
                    }
                }
            })
        });
    </script>
</body>
</html>

Copied!