Element selection

Single element selection

Select animated elements in a object, where each property name represents a CSS selector for an element or group of elements.
For property value set an object ( static, applies the same animation properties to all elements ) or set a function ( dynamic, the function takes an argument which represents the index of each element ) to calculate different property value for each one containing animation configurations, such as keyframes, sync, duration, markers etc... See more animation configuration

let SM = ScrollMoo({
    ".element(s)": { // <-- This is an object
        // animation configuration
    }
});

let SM = ScrollMoo({
    ".elements": i => ({ // <-- This is a function, "i" represents the index of each element
        // animation configuration
    })
});

Important: The values of ease, markers and render3D can not be dynamic, it takes the first index's value and remain on the rest.

Multiple element selection

Specify multiple elements separated by commas, similar to CSS syntax. For instance, ".element(s), .element2" targets both .element(s) and .element2. Selector can reference one or more elements in the DOM.

let SM = ScrollMoo({
    ".element(s), .element2": {
        // animation configuration
    },
    ".elements": i => ({ // "i" represents the index of each element
        // animation configuration
    }),
    ".element3": {
        // animation configuration
    },
    "#element-id1": {
        // animation configuration
    }
});