Реализация поворота и смещения карточек при скролле | JavaScript

Question

Есть три карточки на странице(скрин 1). Нужно, чтобы при скролле страницы, карточки разворачивались с помощью управления transform: rotate() translate() в javascript и чтобы в конечном итоге получилось так(скрин 2). Начало разворачивания тогда, когда скролл доходит до карточек. Спасибо)

Answer 1

Для подобных анимаций советую использовать библиотеку GSAP, вместе с ScrollTrigger.

Вариант когда карточки "расправляются" один раз при скролле.

const tl = gsap.timeline({
    paused: true,
    scrollTrigger: {
        trigger: '.cards',
        markers: true,
        start: 'top center',
        end: 'bottom center',
    }
});

tl.fromTo('.card-1', {rotate: 15}, {rotate: -7.5}, '')
tl.fromTo('.card-3', {rotate: -15}, {rotate: 7.5}, '')

.cards {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 75vh 0;
}

.cards .card {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 200px;
  border-radius: 20px;
  border: 1px solid #000;
  color: #fff;
}

.cards .card-1 {
  background-color: #dc143c;
  transform-origin: right bottom;
  transform: rotate(15deg);
}

.cards .card-2 {
  background-color: #008b8c;
  transform: translateY(-15%);
  z-index: 1;
}

.cards .card-3 {
  background-color: #808000;
  transform-origin: left bottom;
  transform: rotate(-15deg);
}

<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js"></script>

<div class="cards">
  <div class="card card-1">Card 1</div>
  <div class="card card-2">Card 2</div>
  <div class="card card-3">Card 3</div>
</div>

Вариант когда при обратном скролле они "складываются", позволяя проигрывать анимацию при каждом скролле.

const tl = gsap.timeline({
    paused: true,
    scrollTrigger: {
        trigger: '.cards',
        markers: true,
        start: 'top center',
        end: 'bottom center',
        toggleActions: 'play none reverse none'
    }
});

tl.fromTo('.card-1', {rotate: 15}, {rotate: -7.5}, '')
tl.fromTo('.card-3', {rotate: -15}, {rotate: 7.5}, '')

.cards {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 75vh 0;
}

.cards .card {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 200px;
  border-radius: 20px;
  border: 1px solid #000;
  color: #fff;
}

.cards .card-1 {
  background-color: #dc143c;
  transform-origin: right bottom;
  transform: rotate(15deg);
}

.cards .card-2 {
  background-color: #008b8c;
  transform: translateY(-15%);
  z-index: 1;
}

.cards .card-3 {
  background-color: #808000;
  transform-origin: left bottom;
  transform: rotate(-15deg);
}

<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js"></script>

<div class="cards">
  <div class="card card-1">Card 1</div>
  <div class="card card-2">Card 2</div>
  <div class="card card-3">Card 3</div>
</div>

И вариант, когда анимация завязана на скролле.

const tl = gsap.timeline({paused: true});

tl.fromTo('.card-1', {rotate: 15}, {rotate: -7.5}, '')
tl.fromTo('.card-3', {rotate: -15}, {rotate: 7.5}, '')

ScrollTrigger.create({
    trigger: '.cards',
    markers: true,
    start: 'top center',
    end: 'bottom center',
    animation: tl,
    scrub: 0
})

.cards {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: #ccc;
  padding: 10vh 0;
  margin: 75vh 0;
}

.cards .card {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 200px;
  border-radius: 20px;
  border: 1px solid #000;
  color: #fff;
}

.cards .card-1 {
  background-color: #dc143c;
  transform-origin: right bottom;
  transform: rotate(15deg);
}

.cards .card-2 {
  background-color: #008b8c;
  transform: translateY(-15%);
  z-index: 1;
}

.cards .card-3 {
  background-color: #808000;
  transform-origin: left bottom;
  transform: rotate(-15deg);
}

<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js"></script>

<div class="cards">
  <div class="card card-1">Card 1</div>
  <div class="card card-2">Card 2</div>
  <div class="card card-3">Card 3</div>
</div>

БЛОГ НА HUSL

Реализация поворота и смещения карточек при скролле | JavaScript

Ответы (1 шт):