sharathguvvala

Thank you so much, exactly what I need.

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. https://codepen.io/Sharath3718/pen/jOdoyom

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(); }, []);

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. https://codepen.io/Sharath3718/pen/dyawxzz

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!