Vertical cards scroll animation in a pinned container

[sharathguvvala]

I want to create the vertical scroll of cards by pinning a section in background, as implemented in this site, can anyone point me to resources if someone has similar implementation to this, or help me on how to do it.
https://www.squadeasy.com/

Thanks!

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

If you're looking for ScrollTrigger effects, I'd recommend looking at the demos at https://greensock.com/st-demos and https://codepen.io/collection/DkvGzg and https://codepen.io/collection/AEbkkJ - you may be able to use one of those as a jumping-off point. 

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

[mvaneijgen]

Hi @sharathguvvala welcome to the forum!

 

Seems like a cool effect and not that complicated, just a ScrollTrigger that pins a specific element. What have you tried already? We love to see minimal demo's, that way we can see your thought process and thus better help you understand the tools!

If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/ and also check out this tutorial how to work with ScrollTrigger. After going through that, try making a Codepen and come back when you get stuck. Then someone here will be happy to point you in the right direction.  Hope it helps and happy tweening! 

 

 

[sharathguvvala]

Hey can you check this implementation, in second section how to show different cards starting from different positions and ending vertically instead of stacking one on one.

See the Pen dyawxzz by Sharath3718 (@Sharath3718) on CodePen

[mvaneijgen]

I really advise you to take a look at the resources I've send you. Because there is no "magic" here, it is just HTML and CSS (really important) with a bit of GSAP sprinkled in to make things move. 

 

Check it out here is some html with some CSS which randomly position elements, from left to right. (I've just use a quick SCSS snippet to randomly position elements, but you could do that by hand or via some other way) This is our starting point. 

 

See the Pen vYbbBXv?editors=1000 by mvaneijgen (@mvaneijgen) on CodePen

 

Now the fun part! Let's animate them! We want them to animate from the bottom of the screen to the top, so we set a .from() tween that moves them the height of the current screen (+100px their height), we use the powerful stagger object (check the getting started guide I've shared) make it random, giving them an ease makes the distribution a bit more random (don't worry about this for now).

 

See the Pen zYeeOoE?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

If this feels like a good animation, it is time to add ScrollTrigger to the mix to see how that is working. This could look a lot more fancier if you would really design everything with CSS and hand pick the location of the elements, but the logic in these pens will be still the same. Hope it helps and happy tweening! 

 

See the Pen oNmmvWP?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[sharathguvvala]

I have a working scroll component now, actually I am working in nextjs project, how can I make the scroll smooth, currently it just scrolls quickly and not at all smooth, also let me know if code quality can improved in this part.
 

useIsomorphicLayoutEffect(() => {

const ctx = gsap.context(() => {

const cards = gsap.utils.toArray(".item");

const timeline = gsap.timeline({

scrollTrigger: {

trigger: verticalSection.current,

pin: true,

start: "top top",

end: "+=100vh",

markers: true,

scrub: true,

},

});

timeline.from(cards, {

duration: 5,

y: () => window.innerHeight + 350,

ease: "none",

stagger: {

amount: 5,

ease: "none",

},

});

}, verticalSection);

return () => ctx.revert();

}, []);

[GreenSock]

@sharathguvvala first of all, I'd recommend checking out this brand new useGSAP() hook that should make using GSAP in React/Next easier: 

https://www.npmjs.com/package/@gsap/react

 

We'll be announcing it soon. 

 

If you are having trouble with a particular issue, please make sure you provide a minimal demo. Here's a Stackblitz you can fork: 

https://stackblitz.com/edit/react-cxv92j

[sharathguvvala]

I am trying to increase scroll duration, but increasing the value of duration in timeline is not helping. 
Intended behaviour is to delay fast scrolling, want each card to stay on for a sec and on scroll, something like it should take 3 scrolls to finish the container, right now on single fast scroll its moving to next section.

See the Pen jOdoyom by Sharath3718 (@Sharath3718) on CodePen

[mvaneijgen]

Have you checked out our YouTube channel? Here the perfect video that explains your issue in detail! Hope it helps and happy tweening! 

 

 

[sharathguvvala]

Thank you so much, exactly what I need.