@crescendo-collective/anim-scroll v0.0.9

Animation Scroll Library

Installing:

npm i --save animejs @crescendo-collective/anim-scroll;

import animejs;
import @crescendo-collective/anim-scroll;

Examples:

Targeting Via a Query Selector

addScene(document.querySelector('.hero'), (sceneConfig) => {
    let widenOutAnim = anime.timeline({ autoplay: false, loop: true });
        anime.set(sceneConfig.el, {
            width: '20vw',
        });
        widenOutAnim.add({
            targets: sceneConfig.el,
            easing: 'linear',
            width: '100vw',
        });
        sceneConfig.timelines.push({
            start: 0.75,
            end: 0.2,
            timeline: widenOutAnim,
        });

        return sceneConfig;
    });
}

Creating a Preset

<div class="tipItem" data-anim-preset="tipEnter"></div>
<div class="tipItem" data-anim-preset="tipEnterRight"></div>

registerPresets('tipItem', {
    tipEnter: (sceneConfig) => {
        let tipItemAnim = anime.timeline({ autoplay: false, loop: true });

        anime.set(sceneConfig.el, {
            translateX: '-600',
            scale: 0.5,
            opacity: 0,
        });

        tipItemAnim.add({
            targets: sceneConfig.el,
            easing: 'linear',
            translateX: '-90',
            opacity: 1,
            scale: 1,
        });

        sceneConfig.timelines.push({
            start: 0.6,
            end: 0.4,
            timeline: tipItemAnim,
        });

        return sceneConfig;
    },

    tipEnterRight: (sceneConfig) => {
        let tipItemAnim = anime.timeline({ autoplay: false, loop: true });

        anime.set(sceneConfig.el, {
            translateX: '200',
            scale: 0.5,
        });

        tipItemAnim.add({
            targets: sceneConfig.el,
            easing: 'linear',
            translateX: '0',
            scale: 1,
        });

        sceneConfig.timelines.push({
            start: 0.6,
            end: 0.4,
            timeline: tipItemAnim,
        });

        return sceneConfig;
    },
});