jsdk-offical/examples/jsan/tween_easings.js

JSDK is the most comprehensive TypeScript framework, like JDK.

JS.imports('$jsan').then(() => {
    let demoContentEl = $1('.demo-content'), fragment = document.createDocumentFragment(), easings = [
        'LINEAR',
        'QUAD_IN',
        'QUAD_OUT',
        'QUAD_IN_OUT',
        'CUBIC_IN',
        'CUBIC_OUT',
        'CUBIC_IN_OUT',
        'QUART_IN',
        'QUART_OUT',
        'QUART_IN_OUT',
        'QUINT_IN',
        'QUINT_OUT',
        'QUINT_IN_OUT',
        'SINE_IN',
        'SINE_OUT',
        'SINE_IN_OUT',
        'EXPO_IN',
        'EXPO_OUT',
        'EXPO_IN_OUT',
        'CIRC_IN',
        'CIRC_OUT',
        'CIRC_IN_OUT',
        'ELASTIC_IN',
        'ELASTIC_OUT',
        'ELASTIC_IN_OUT',
        'BACK_IN',
        'BACK_OUT',
        'BACK_IN_OUT',
        'BOUNCE_IN',
        'BOUNCE_OUT',
        'BOUNCE_IN_OUT'
    ];
    function createEasingDemo(easing) {
        var demoEl = document.createElement('div');
        demoEl.classList.add('stretched', 'square', 'el');
        new TweenAnim({
            keys: {
                translateX: 250
            },
            direction: 'alternate',
            loop: true,
            delay: 500,
            endDelay: 500,
            duration: 2000,
            easing: easing
        }).targets(demoEl).play();
        fragment.appendChild(demoEl);
    }
    easings.forEach(function (easeName) {
        createEasingDemo(easeName);
    });
    demoContentEl.innerHTML = '';
    demoContentEl.appendChild(fragment);
});