Pin section text to top untill section items scroll

[DevNate]

Apologies, i try to write the code on codepen but it keeps refreshing. I want to be able to pin the section title to the top of the view port while the user is scrolling images untill the last item is reached but the title always skipps(jumps). Below is my code, I appreciate your response 

 

 

import React, { useEffect, useRef } from "react";

import { gsap } from "gsap/dist/gsap";

import { ScrollTrigger } from "gsap/dist/ScrollTrigger";

 

function Pin() {

  const headerRef = useRef(null);

 

  useEffect(() => {

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

      gsap.to(".heading", {

        scrollTrigger: {

          trigger: ".heading",

          start: "top top",

          end: 1200,

          markers: true,

          pin: ".heading",

          scrub: true,

        },

      });

    });

  }, []);

 

  return (

    <>

      <div className="w-full h-screen bg-gray-200 ">Text</div>

      <div

        ref={headerRef}

        className="h-content w-full relative flex flex-row justify-center items-center"

      >

        <h1 className="heading text-9xl left-[2%]  z-40 top-6  absolute">

          Pin this to top till section scroll

        </h1>

 

        <div className="z-50">

          <div className="w-full h-screen flex justify-center items-center ">

            <div className="flex justify-center items-center text-white  bg-red-500 w-[50vw] h-[60vh]">

              the project

            </div>

          </div>

          <div className="w-full h-screen flex justify-center items-center ">

            <div className="flex justify-center items-center text-white  bg-red-500 w-[50vw] h-[60vh]">

              the project

            </div>

          </div>

        </div>

      </div>

      <div className="w-full h-screen bg-blue-100">Text</div>

    </>

  );

}

 

export default Pin;

[GreenSock]

It's very difficult for us to troubleshoot without a minimal demo, so I just forked our React starter template and dropped in most of your code: 

https://codesandbox.io/s/goofy-ellis-0ilu2g?file=/src/App.js

 

It seems to work as expected. 

 

I'm not sure why you had end: 1200. Did you realize that when you use a number, that gets interpreted as an absolute scroll position?  I assume you want it to unpin at a different place (not exactly 1200px of scroll from the very top). You also don't need to use a tween if you're just pinning something - use ScrollTrigger.create() for simple things like that. 

 

Also, if all you're trying to do is keep a header in place while a particular section is in view (its parent container), you might want to just use CSS position: sticky for that. 

 

If you still need help, please provide a minimal demo that clearly illustrates the issue and we'd be happy to help with any GSAP-related questions.