Выбор библиотеки для анимации движения карт: anime

Просто записывать партию в карты незачем – надо же смотреть, как оно будет выглядеть в реальности. Здесь я решил сначала пойти по самому простому пути: создать 36 объектов и динамически изменять их: двигать карты, переворачивать. Это всё, конечно, можно сделать на jQuery или даже на чистом JS, но все же хочется заранее оставить простор для украшательств и немного облегчить путь; так что я решил задействовать для этой цели библиотеку. Сначала выбор пал на anime.

Работает практически везде, небольшая, шустрая, есть выбор эффектов, не самая молодая, но и не старая – вот основные критерии выбора. Практически сразу набросал пример

<div id="scene">
    <div id="hand2"></div>
    <div id="table"></div>
    <div id="hand1">
        <img id="card0" src="img/0.jpg" />
    </div>
</div>
<br>
 <button id="str">Старт</button>       
<style>
body{
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
<script src="anime.min.js"></script>
<script>
function startAnimation() {
    anime({
        targets: '#card0',
        translateY: -100,
        duration: 1000,
        easing: 'linear'
    });
}

document.getElementById('str').addEventListener('click', startAnimation);
</script>

Здесь по нажатию на кнопку «Старт» мы заставляем двигаться вверх бубновую шестерку. Вот, можете посмотреть, как оно выглядит в реале.


Старт

Отлично. Теперь надо дальше сделать другую вещь: связать мою карточную нотацию из прошлой записи и вот эту анимацию. Думаем дальше..