Эффект анимации стека с помощью Animejs ⇐ Html

[Anonymous]

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

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

This is main section

Bye bye section 1

Section with cards
Magic is here with cards



Card title1
And also we have card text!

Card title2
And also we have card text!

Card title3
And also we have card text!

Card title4
And also we have card text!

Card title5
And also we have card text!




Another section

I am footer

js

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

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
})
});
});

и стили

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

*{
box-sizing: border-box;
}
#entire-page{
// min-height: 100vh;
// overflow: auto;
display: flex;
flex-flow: column nowrap;
background: #dcf5f5;
}

.section {
display: flex;
flex-flow: column nowrap;
height: 100%;
min-height: 100vh;
text-align: center;
position: relative;
border-bottom: 1px solid blue;
h1, h2, p {
margin-bottom: 20px;
}

&.section-2 {
position: sticky;
min-height: 100vh;
top: 0;
left: 0;
z-index: 2;
background: coral;
}

&.section-3 {
position: sticky;
top: 0;
left: 0;
z-index: 3;
background: #decfa7;
}

.end-text{
display: flex;
align-self: center;
margin-top: auto;
}
}

.cards-holder{
position: relative;
height: 320px;
width: 420px;
border: 1px solid black;
display: flex;
align-self: center;
justify-self: center;
margin: auto;
perspective: 1000px;

}

.card{
position: absolute;
left: 0;
top: 0;
width: 100%;
border: 1px solid black;
padding: 20px;
border-radius: 10px;
background: #fff;
box-shadow: 0 2px 2px 0 rgba(0,0,0,.15);
h5{
font-size: 22px;
}
}

@for $i from 5 through 1 {
.card:nth-child(#{$i}) {
z-index: 5-$i;
}
}

.footer{
background: rgba(0,0,0,.2);
padding: 10px;
}

Но мне не хватает эффекта движения стека вперед. когда первый слайд уже находится на полпути анимации вверх, весь стек должен начать параллельно менять свою позицию Z, и первый слайд должен быть в z=0 перед слайдом вверх. надеюсь, это имеет смысл

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