So I have implemented card stacking on scroll, the individual cards work fine - however, I wanted it to exist half way down the screen so I added a parent wrapper that implemented gsap.to() to make it sit top: 50% and stack the cards visibly in the center. However, once adding it, the cards no longer stack smoothly but they now jump to position. Why does adding another break the child elements animation?
They code sits within useEffect, this works fine in CodePen but not my react code, see below for code outside codepen.
useEffect(() => {
gsap.registerPlugin(ScrollTrigger);
const timeline = gsap.timeline();
const cards = gsap.utils.toArray(".cards") as Element[];
const wrapper = gsap.utils.toArray(".wrapper") as Element[];
timeline.to(wrapper, {
scrollTrigger: {
trigger: wrapper,
start: () => `top bottom-=100`,
end: () => `top top+=40`,
scrub: true,
markers: true,
invalidateOnRefresh: true,
},
ease: "none",
yPercent: -50,
top: "50%",
position: "sticky",
});
cards.forEach((card, index) => {
timeline.to(card, {
scrollTrigger: {
trigger: card,
start: () => `top bottom-=100`,
end: () => `top top+=40`,
scrub: true,
markers: true,
invalidateOnRefresh: true,
},
ease: "none",
opacity: 1,
scale: () => 1 - (cards.length - index) * 0.025,
});
ScrollTrigger.create({
trigger: card,
start: "top top",
pin: true,
pinSpacing: false,
markers: true,
id: "pin",
end: "max",
invalidateOnRefresh: true,
});
});
}, []);
return (
<div>
<div ref={stackRef} className="cardswipe">
<h3 className="heading">Working Process</h3>
<div className="wrapper">
{processes.map((i, index) => (
<div
key={`${i.text}_${index}`}
className="cards"
style={{ top: `calc${index} * 20)` }}
>
<div
key={`${i.text}_${index}`}
title={i.title}
text={i.text}
className="card"
/>
</div>
))}
</div>
</div>
</div>
);