serii81
@serii81
Я люблю phр...

Gsap, как анимировать элементы и их детей с delay?

Всем привет.
Элементы на странице вывожу через цикл.
<div class="why-us__items">
      <?php foreach ($items as $item) : ?>
        <?php
        $title = $item['title'];
        $icon = $item['icon'];
        $text = $item['text'];
        ?>
        <div class="why-us__item">
          <div class="why-us__icon"><?php echo $icon; ?></div>
          <div class="why-us__content">
            <h3 class="why-us__subtitle"><?php echo $title; ?></h3>
            <div class="why-us__text"><?php echo $text; ?></div>
          </div>
        </div>
      <?php endforeach; ?>
    </div>


И с помощью gsap хочу анимировать появление каждого из них с stagger, а также их детей.

import gsap from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger";
export default function whyUsAnimation() {
  gsap.registerPlugin(ScrollTrigger);

  const items = document.querySelectorAll(".why-us__item");
  gsap.from(items, {
    opacity: 0,
    y: 50,
    duration: 0.7,
    stagger: 0.4,
    scrollTrigger: {
      start: "top 80%",
      trigger: items[0], // Using the first item to trigger the staggered animation
    },
  });

  items.forEach((item, index) => {
    const icon = item.querySelector(".why-us__icon");
    const subtitle = item.querySelector(".why-us__subtitle");
    const text = item.querySelector(".why-us__text");
    gsap.from(icon, {
      opacity: 0,
      y: 200,
      duration: 0.7,
      scrollTrigger: {
        start: "top: 80%",
        trigger: item,
      },
    });
    gsap.from(subtitle, {
      opacity: 0,
      x: -100,
      duration: 0.5,
      delay: 0.7,
      scrollTrigger: {
        start: "top: 80%",
        trigger: item,
      },
    });
    gsap.from(text, {
      opacity: 0,
      y: 30,
      duration: 0.5,
      delay: 1.2,
      scrollTrigger: {
        start: "top: 80%",
        trigger: item,
      },
    });
  });
}


Так работает.
Только дети анимируются одновременно, а нужно, чтобы появился первый элемент, анимировался он и его дети, потом следующий.
  • Вопрос задан
  • 62 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
24 нояб. 2024, в 01:35
5000 руб./за проект
24 нояб. 2024, в 01:24
500 руб./за проект
24 нояб. 2024, в 00:04
5000 руб./за проект