Danielson

The problem I have is that my pinned element is not on top on pinspacer, but there is blank space for some reason. It only happens on initial load of page, when i scroll to the bottom and scroll back up the pinned elements stays fixed at top code: useIsomorphicLayoutEffect(() => { gsap .timeline({ scrollTrigger: { trigger: containerRef.current, pinSpacing: true, scrub: true, start: 'top top', end: '+=400', markers: true, }, }) .to(building1Ref.current, { opacity: 0 }) .to(building2Ref.current, { opacity: 0.5 }); }, []); return ( <HeroSC ref={containerRef}> <H1>{t('header.title')}</H1> <BuildingsAnimationSC> <Building ref={building1Ref} /> <BuildingLarge ref={building2Ref} /> <Building ref={building3Ref} /> <BuildingMain ref={building4Ref} /> <Building ref={building5Ref} /> <BuildingLarge ref={building6Ref} /> <Building ref={building7Ref} /> </BuildingsAnimationSC> <H3>One innovative house decided to become an investment</H3> <H4>Skip the story</H4> </HeroSC> ); the green space in the image is pinspacer, gray area is the pinned element, there is no margin/padding set on the gray area