narlie Posted January 21, 2023 Share Posted January 21, 2023 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 More sharing options...
Cassie Posted January 21, 2023 Share Posted January 21, 2023 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 More sharing options...
narlie Posted January 21, 2023 Author Share Posted January 21, 2023 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 More sharing options...
Cassie Posted January 21, 2023 Share Posted January 21, 2023 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 More sharing options...
narlie Posted January 21, 2023 Author Share Posted January 21, 2023 interesting... Thank you! First time using gsap so this is amazing support - appreciate it! 2 Link to comment Share on other sites More sharing options...
Cassie Posted January 21, 2023 Share Posted January 21, 2023 No worries at all! Have fun Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now