[ScrollTrigger pin to middle of container and end when scroll gets towards bottom]

that worked, amazing! thanks for the suggestion 

[ScrollTrigger pin to middle of container and end when scroll gets towards bottom]

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.

[GSAP cards pinning top of screen instead of center]

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

[GSAP cards pinning top of screen instead of center]

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?

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

[Best method of implementing scroll opening tabs and recording with a progress bar?]

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.

 

 

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

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

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

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.

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

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