Стек анимации с помощью AnimejsCSS

Разбираемся в CSS
Anonymous
Стек анимации с помощью Animejs

Сообщение Anonymous »

Привет, ребята, я столкнулся с проблемой при анимации стопки карточек с помощью Animejs. Поэтому я хочу добиться эффекта, когда вы прокручиваете карту из стопки и перемещаете ее вверх и делаете небольшой поворот, как в этом джеме.
Мне удалось заставить мои карты смахиваться одну за другой и синхронизировать анимацию со прокруткой. Это нормально. Но я не могу понять, как в то же время, когда карта смахивается, остальная часть стопки должна изменить свое положение Z. Поэтому анимация выглядит красиво и плавно.
Я подготовил здесь код. Есть идеи/советы? Чего мне не хватает?
Опять же, эта часть анимации работает нормально

Код: Выделить всё

const cards = utils.$(".card");

cards.forEach((card, index) => {
animate(card, {
rotateX: [0, 25],
translateZ: [-index * 40, 0],
translateY: [index * 20, -window.innerHeight / 2 - 300],

easing: "easeInOutSine",
autoplay: onScroll({
container: "document",
enter: `center top`,
leave: `center bottom-=60`,
sync: true,
debug: true
})
});
});

Но мне не хватает эффекта перемещения стека вперед

Подробнее здесь: https://stackoverflow.com/questions/797 ... th-animejs

Вернуться в «CSS»