[Facing issue for scroll trigger with overlapping to upper section]

Hi , 

Please find the attachment of my codePen Link for solving the issue. In this, i have used gatsby platform and also tailwind CSS. Please help me to solve the issue.

 

See the Pen ZExvjOq by rohit0809 (@rohit0809) on CodePen

 

[Facing issue for scroll trigger with overlapping to upper section]

Hi , I need a help in a scroll trigger vertical scroll issue. 
In this , I have make a section in the middle of the page but when i enter first time on the page, the scroll section will start from overlap to upper section and when i refresh it, it is working fine. 

Please help me to solve this issue. I am attaching the screenshot for the same as well. I am attaching the screenshot of the code as well. 

 

useEffect(() => {

    gsap.timeline({

      scrollTrigger: {

        trigger: ".work-all-types-section",

        start: "top top",

        end: "bottom top",

        scrub: true,

        pin: ".work-all-types-container",

        toggleActions: "play none none reverse",

      }

    }).to(".work-type-inner-detail-wrapper", 5, { scale: 0.7 }, { scale: 1, ease: ExpoScaleEase.config(0.7, 1) })

  }, [])