Jump to content
GreenSock

narlie

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

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

Hi there!

 

This approach is a little bit wonky. If you're move a containing element the children's positioning is going to be thrown off.

 

This video and demo should help you get on a better track
 


See the Pen mdLaeQo by GreenSock (@GreenSock) 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

Well, with this technique you can tell it to pin anywhere you like!

In this pen I'm now saying pin when the top of the '.cards.' container hits 30% of the way down from the top of the viewport.
 

Quote

    start: 'top 30%',

 

See the Pen mdjpoLB?editors=0010 by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

interesting... Thank you! First time using gsap so this is amazing support - appreciate it!

  • Like 2
Link to comment
Share on other sites

No worries at all! Have fun

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.
×