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

[Anonymous]

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

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

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

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

const { animate, utils, onScroll } = anime;




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

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