narlie

that worked, amazing! thanks for the suggestion

so in this example here https://stackblitz.com/edit/vitejs-vite-gqbqex?file=src%2Findex.css,src%2FApp.jsx,vite.config.js&terminal=dev I have card pinnings that have `end: max`. This makes it scroll all the way to the bottom and in my website sit behind the footer. How do I end the scroll trigger towards the end of its container so it doesn't finish all the way to the bottom. Using `bottom bottom` doesn't work as it is of the item, not the container. End result wanted: What implementation to stop the scroll trigger and pins within center of its container and not go all the way to the bottom.

thanks for the reply! Looking at this demo, it seemed something within my scroll trigger was not allowing it top be central. Really appreciate the demo, worked it out. Thanks

Hi, as you can see in the codepen, which is almost identical to what I have in my react js application, they pin in the center(ish). However, when I render this into my component, the cards pin at the top and for the life of me I cannot figure out why? from what I can see, they stack, just at the top... How do I make sure its within the center?

hey, fairly new to GSAP but wonder what would be the best way to implement a scroll based implementation, where tabs open and close to display information but also there is a progress bar above that shows distance. I have attached an image for visualisation.

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

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.

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