Стек анимации с помощью 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
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

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