CODE EXAMPLE

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: 200,
        endDelay: 200,
        duration: 2000,
        easing: easing
    }).targets(demoEl).play();
    fragment.appendChild(demoEl);
}

easings.forEach(function (easeName) {
    createEasingDemo(easeName);
});

demoContentEl.innerHTML = '';
demoContentEl.appendChild(fragment);