SOURCE

import { animate, stagger, createTimeline, eases } from 'https://cdn.jsdelivr.net/npm/animejs@4.0.0/+esm'

const { log, dir, table, clear, warn, error } = console; clear();

// animate('.box', {
//     x: 100,
//     delay: stagger(100)
// })

const tl = createTimeline({
    defaults: {
        ease: eases.outCubic,
        autoplay: false,
    }
})

tl.add('.box-1', {
    x: [100, 300]
})


tl.add('.box-2', {
    x: [100, 300, 0],
    y: [0, 50, 0]
})

<div class="box box-1">F</div>
<div class="box box-2">F</div>
<div class="box box-3">F</div>

html, body {
    height: 100%;
    margin: 0;
}
body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background: #fff;
}
.box {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-weight: bold;
    width: 50px;
    height:50px;
    background: #08f;
    box-shadow: 0 6px 6px #0088ff88;
}