@crescendo-collective/anim-scroll

Animation Scroll Library

Installing:

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

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;
    },
});