letter flip and swap - Githubissues

i'm trying to do this effect with animejs:

flip letters of a text line 0deg -> 90deg
overlap flip letters from next text line 90deq -> 0deg
pause
repeat

i got this far, where the letters from "foo" -> "baar" flip and swap like i want, but for "baar" -> "foo" (end/start of loop) i could not figure out how to overlap them.

<!doctype html>
<html>
<head>
<script src="anime.min.js"></script>
<style>
ol {
    list-style: none;
    display: inline-grid;
    margin: 0;
    padding: 0;
}
li {
    display: inline-block;
    grid-column-start: 1;
    grid-row-start: 1;
}
span {
    display: inline-block;
}
</style>
</head>
<body>
<h1>hello <ol><li>foo</li><li>baar</li></ol> world</h1>
</body>
<script>
let lines = document.querySelectorAll("li");
let lineChars = [];
let duration = 500;
let delay = 200;
let pause = 1000;
let timeline = anime.timeline({
    loop: true,
});
lines.forEach((line, i)=>{
    line.innerHTML = line.textContent.replace(/\S/g, "<span>$&</span>");
    let chars = line.querySelectorAll("span");
    lineChars[i] = chars.length;
    let offset = delay * (lineChars[i-1] - 1);
    timeline.add({
        targets: chars,
        easing: 'linear',
        rotateY: [90, 0],
        perspective: 10,
        duration: duration,
        delay: anime.stagger(delay),
        endDelay: pause,
    }, '-=' + (offset > 0 ? offset : 0));
    timeline.add({
        targets: chars,
        easing: 'linear',
        rotateY: [0, 90],
        perspective: 10,
        duration: duration,
        delay: anime.stagger(delay),
    });
});
</script>
</html>

any ideas?

juliangarnier / anime

letter flip and swap #812