Jump to content
Search Community

Adding different gsap.to() to parent and child makes child animation jump and not move smoothly on scroll in React component.

narlie test
Moderator Tag

Recommended Posts

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>
);
 

See the Pen WNKZWvv by narliecholler (@narliecholler) on CodePen

Link to comment
Share on other sites

that makes more sense, will approach it like this. However, I kind of want it to sit in the middle of the screen and therefore felt the wrapper needed one too so it would scroll and stop at 50% top and then the cards will stack from there.

What would be the best approach for that, seeing as the parent with gsap now stops the cards from stacking smoothly .

thanks for the video though, helpful.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...