jsdk-offical/examples/jsan/timeline_tween_parallel.js

JSDK is the most comprehensive TypeScript framework, like JDK.

JS.imports('$jsan').then(() => {
    let anim = new Timeline({
        duration: 800,
        autoreset: true
    })
        .add({
        type: 'tween',
        targets: '.square.el-1',
        keys: { left: '+=250' },
        duration: 500,
        endDelay: 1300
    }, 0)
        .add({
        type: 'tween',
        targets: '.circle.el-1',
        keys: { left: '+=250' },
        endDelay: 500
    }, 500)
        .add({
        type: 'tween',
        targets: '.square.el-2',
        keys: { left: '+=250' }
    })
        .add({
        type: 'tween',
        targets: '.circle.el-2',
        keys: { left: '+=250' },
        endDelay: 1000
    }, 0);
    $1('#demo').on('click', () => {
        $1('.log').innerHTML = 'Playing...';
        anim.play().then((excuted) => {
            if (excuted)
                $1('.log').innerHTML = 'All Finished!';
        });
    });
});