Всем привет.
Элементы на странице вывожу через цикл.
<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,
},
});
});
}
Так работает.
Только дети анимируются одновременно, а нужно, чтобы появился первый элемент, анимировался он и его дети, потом следующий.