Search the Community

There's this extra space below the section even though i have given the section 680px of height.. and also at the end of this sectiona massive space is coming even though i never added it?.. heres the code "use client" import React, { useEffect, useRef } from 'react' import gsap from 'gsap' import { ScrollTrigger } from 'gsap/dist/ScrollTrigger' const steps = [ { id: 1, number: '1', title: 'Initial Discovery & Research', desc: 'We begin by aligning your goals with market research to validate and shape ideas.' }, { id: 2, number: '2', title: 'Brainstorming & Idea Generation', desc: 'We collaborate through brainstorming to spark innovation and explore diverse ideas.' }, { id: 3, number: '3', title: 'Idea Screening & Selection', desc: 'We filter ideas by feasibility, goals, and market fit to focus on those with the highest potential.' }, { id: 4, number: '4', title: 'User Persona Development', desc: 'We craft user personas to tailor concepts around real needs, behaviours, and pain points for user-centric solutions.' }, { id: 5, number: '5', title: 'Feasibility Study & Risk Assessment', desc: 'We assess feasibility and risks to build a strong, strategic foundation for product development.' }, { id: 6, number: '6', title: 'Prototyping & Concept Visualization', desc: 'We create prototypes and wireframes to visualize ideas, refine concepts, and gather stakeholder feedback.' }, { id: 7, number: '7', title: 'Feedback & Iteration', desc: 'We gather feedback to refine prototypes, ensuring concepts meet user needs and market expectations.' }, { id: 8, number: '8', title: 'Defining the Product Roadmap', desc: 'We design a product roadmap that defines timelines, milestones, and goals to guide development.' }, { id: 9, number: '9', title: 'Final Concept Approval', desc: 'The process ends with final concept approval, aligning all stakeholders for development.' } ] function ProductSuccess() { const sectionRef = useRef<HTMLDivElement | null>(null) const cardsContainerRef = useRef<HTMLDivElement | null>(null) const cardRefs = useRef<Array<HTMLDivElement | null>>([]) useEffect(() => { gsap.registerPlugin(ScrollTrigger) // Offset to leave space for fixed navbar (adjust if navbar height changes) const NAV_OFFSET_PX = -45 const section = sectionRef.current const cardsContainer = cardsContainerRef.current const cards = cardRefs.current if (!section || !cardsContainer || cards.length === 0) return // Calculate card height + gap const cardHeight = cards[0]?.offsetHeight || 0 const gap = 16 // mb-4 = 16px const totalCardHeight = cardHeight + gap // Set initial positions - all cards stacked below the viewport cards.forEach((card, index) => { if (index === 0) { gsap.set(card, { y: 0 }) } else { // Position each card below the previous one gsap.set(card, { y: totalCardHeight * index }) } }) // Create timeline for the animation const tl = gsap.timeline({ scrollTrigger: { trigger: section, // start when section hits just below navbar start: `top+=${NAV_OFFSET_PX} top`, end: () => `+=${totalCardHeight * (cards.length - 1) + window.innerHeight}`, scrub: 0.5, pin: true, anticipatePin: 1, } }) // Animate each card group cards.forEach((card, index) => { if (index > 0) { // Move all cards from current index onwards up by one card height const cardsToMove = cards.slice(index) tl.to(cardsToMove, { y: (cardIndex) => { const originalIndex = index + cardIndex const newPosition = totalCardHeight * (originalIndex - index) return newPosition }, duration: 1, ease: "none", stagger: 0 }, index === 1 ? 0 : ">") } }) return () => { ScrollTrigger.getAll().forEach(trigger => trigger.kill()) } }, []) return ( <section ref={sectionRef} className="w-full bg-white py-12 md:py-16 lg:py-20 h-[680px] overflow-hidden"> <div className="max-w-7xl mx-auto px-4 lg:px-0"> <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-start"> {/* Left: Heading + paragraph (pinned) */} <div className="flex flex-col justify-start lg:sticky lg:top-0"> <h2 className="font-['Inter'] font-semibold text-[28px] md:text-[32px] lg:text-[36px] leading-[120%] text-[#000000] max-w-[550px]"> From Vision to Reality: Our Proven Path to Product Success </h2> <p className="mt-4 md:mt-8 font-['Inter'] font-normal text-[16px] leading-[24px] text-[#00000066] max-w-xl"> Our product ideation and conceptualization is a step-by-step journey from brainstorming and research to prototyping and refinement. We then craft a strategic roadmap to guide your concept into development, ensuring every decision aligns with your vision. </p> </div> {/* Right: Steps list with animation */} <div className="w-full relative"> <div ref={cardsContainerRef} className="relative h-[200px]"> <div className="absolute top-0 left-0 w-full"> {steps.map((s, index) => ( <div key={s.id} ref={el => { cardRefs.current[index] = el }} className="absolute top-0 left-0 w-full" > <div className="flex items-stretch gap-[36px]"> {/* Strip */} <div className="w-[66px] flex flex-col items-center flex-shrink-0 bg-white"> <div className="text-left whitespace-nowrap bg-white font-['Inter'] font-semibold text-[15px] leading-[20px] text-[#000000]"> {`STEP - 0${s.number}`} </div> <div className="flex-1 w-full flex items-start min-h-[120px]"> <div className="mx-auto w-0.5 h-full" style={{ background: 'repeating-linear-gradient(to bottom, #00000033 0px, #00000033 4px, transparent 4px, transparent 6px)' }} /> </div> </div> {/* Card */} <div className="flex-1 mb-4"> <div className="bg-[#FAFAFA] rounded-[12px] p-6"> <div className="flex flex-col items-start"> <div className="w-[48px] h-[48px] rounded-[8px] bg-[#3C82F6] flex items-center justify-center mb-3"> <span className="font-['Inter'] font-bold text-[24px] leading-[24px] text-white">{s.number}</span> </div> <div className="font-['Inter'] font-medium text-[18px] leading-[27px] text-[#0C0C0C]"> {s.title} </div> <div className="mt-1 font-['Inter'] font-normal text-[12px] leading-[20px] text-[#00000066]"> {s.desc} </div> </div> </div> </div> </div> </div> ))} </div> </div> </div> </div> </div> </section> ) } export default ProductSuccess

Hello, I'm trying to create a diagonal scrolling effect on a large div. I have a wrapper div that is pinned and hides the overflow, and a grid div to diagonally scroll over. My problem is that despite setting pinSpacing to false, if you scroll down to the end of the animation pinspacing is suddenly set to true, and the page is doubled in length. This spacing does not appear before reaching the bottom of the animation, as indicated by the scroll bar. Any help is appreciated.