Hey @Cassie
Really appreciate the help you're a hero!
So i changed the names of the classes to avoid confusion.
I actually want to animate this line:
But of course not globally, but changing it to the way you showed just animates the container. Is the way maybe to use a loop inside the loop for every card?
EDIT: I figured it out:
gsap.utils.toArray(".way-cards-container").forEach((container, i) => {
const cards = container.querySelectorAll(".way-card"); //loop through each .way-card within its respective container
gsap.fromTo(
cards,
{
y: () => window.innerHeight + 100,
rotate: -90,
},
{
y: 0,
stagger: 0.5,
rotate: 0,
scrollTrigger: {
pin: container,
markers: false,
scrub: true,
start: "top top",
end: "+=1000",
invalidateOnRefresh: true
}
}
);
});