ScrollTrigger Disappears Pinned Column

[Noelani]

Initially, I wanted to create a GSAP ScrollTrigger responsive split-screen pinning effect similar to what is showcased on deveb.co. However, I was never able to get it to work. As a result, I decided to simplify and go back to the basics, using this codepen project: OLD scroll left pin right mockup -- not responsive.

It was during this process that I realized the root of my issue had always been the same: whenever the column pinning starts, it disappears, and when the animation ends, it reappears. I've spent hours searching through forums for solutions but haven't found a fix.

 

I first tried using gsap.context(); to resolve the issue:

// Scroll.jsx

import React, { useLayoutEffect } from 'react';

import { gsap } from 'gsap';

import { ScrollTrigger } from 'gsap/ScrollTrigger';

import './Scroll.css';

 

gsap.registerPlugin(ScrollTrigger);

 

const Scroll = () => {

  useLayoutEffect(() => {

   

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

     

      ScrollTrigger.create({

        trigger: ".gallery",

        start: "top top",

        end: "bottom bottom",

        pin: ".right",

        pinSpacing: true,

        markers: true,

        scrub: true,

      });

    });

 

   

    return () => ctx.revert();

  }, []);

 

  return (

    <>

      <div className="spacer"></div>

 

      <div className="gallery">

        <div className="left">

          <div className="detailsWrapper">

            <div className="details">

              <div className="headline"></div>

              <div className="text"></div>

              <div className="text"></div>

              <div className="text"></div>

              <div className="text"></div>

            </div>

 

            <div className="details">

              <div className="headline"></div>

              <div className="text"></div>

              <div className="text"></div>

              <div className="text"></div>

              <div className="text"></div>

            </div>

 

            <div className="details">

              <div className="headline"></div>

              <div className="text"></div>

              <div className="text"></div>

              <div className="text"></div>

              <div className="text"></div>

            </div>

          </div>

        </div>

 

        <div className="right">

          <div className="photos"></div>

        </div>

      </div>

 

      <div className="spacer"></div>

      <div className="spacer"></div>

      <div className="spacer"></div>

    </>

  );

};

 

export default Scroll;

 

That didn't work, so I decided to use useGSAP(), but it still produces the same result.

// Scroll.jsx

import React, { useRef } from 'react';

import { gsap } from 'gsap';

import { ScrollTrigger } from 'gsap/ScrollTrigger';

import { useGSAP } from '@gsap/react';

import './Scroll.css';

 

gsap.registerPlugin(ScrollTrigger);

 

const Scroll = () => {

  const galleryRef = useRef(null);

 

  useGSAP(

    () => {

      ScrollTrigger.create({

        trigger: galleryRef.current,

        start: "top top",

        end: "bottom bottom",

        pin: ".right",

        pinSpacing: true,

        scrub: true,

        markers: true,

      });

    },

    { scope: galleryRef }

  );

 

  return (

    <>

      <div className="spacer"></div>

 

      <div ref={galleryRef} className="gallery">

        <div className="left">

          <div className="detailsWrapper">

            <div className="details">

              <div className="headline"></div>

              <div className="text"></div>

              <div className="text"></div>

              <div className="text"></div>

              <div className="text"></div>

            </div>

 

            <div className="details">

              <div className="headline"></div>

              <div className="text"></div>

              <div className="text"></div>

              <div className="text"></div>

              <div className="text"></div>

            </div>

 

            <div className="details">

              <div className="headline"></div>

              <div className="text"></div>

              <div className="text"></div>

              <div className="text"></div>

              <div className="text"></div>

            </div>

          </div>

        </div>

 

        <div className="right">

          <div className="photos"></div>

        </div>

      </div>

 

      <div className="spacer"></div>

      <div className="spacer"></div>

      <div className="spacer"></div>

    </>

  );

};

 

export default Scroll;

 

I have reviewed the React & GSAP | GSAP | Docs & Learning, countless forums, and YouTube tutorials, but I’m still struggling to find a solution. I’m reaching out to you in the hope that you can help me.

 

 

/* Scroll.css */

body {

    background: #EEF4FF;

    margin: 0;

  }

 

  .spacer {

    width: 100%;

    height: 50vh;

    background: #ddd;

  }

 

  .headline {

    background: #2D4E86;

    border-radius: 6px;

    height: 4em;

    width: 100%;

  }

 

  .text {

    margin: 0.8em 0 0 0;

    background: #2D4E86;

    border-radius: 6px;

    height: 1em;

    width: 100%;

  }

 

  .gallery {

    display: flex;

    outline: 1px solid red;

    height: auto;

  }

 

  .left {

    width: 50%;

  }

 

  .detailsWrapper {

    margin: auto;

    width: 80%;

  }

 

  .details {

    height: 100vh;

    outline: 1px solid green;

    display: flex;

    flex-direction: column;

    justify-content: center;

  }

 

  .right {

    position: sticky;

    top: 0;

    outline: 1px solid purple;

    width: 50%;

    height: 100vh;

    display: flex;

    flex-direction: column;

    justify-content: center;

    /* overflow: hidden; */

    z-index: 1;

  }

 

  .photos {

    width: 40vw;

    height: 40vw;

    background: maroon;

    /* visibility: visible; */

  }

 

I’ve attached a video that visually demonstrates the issue, and I would be incredibly grateful for your assistance in resolving this. 

 

See the Pen RwYdVyK?editors=0010 by snorkltv (@snorkltv) on CodePen.

[Rodrigo]

Hi,

 

There has to be something in your setup that is causing this. This demo, while simple, works as expected:

 

https://stackblitz.com/edit/vitejs-vite-sasvcx?file=src%2Findex.css,src%2FApp.jsx&terminal=dev

 

Normally we see that kind of behaviour when users either are not doing manual cleanup with useEffect/LayoutEffect hooks or not using useGSAP. Maybe you're creating other ScrollTrigger instances but these are not being created in the order they appear on the screen.

 

Hopefully this helps

Happy Tweening!

[fr8877]

Did you manage to find a solution? I have the same issue. Using vanilla JS

[Rodrigo]

Hi @fr8877,

 

Here is the same demo in Codepen:

See the Pen LEPweRo by GreenSock (@GreenSock) on CodePen.

 

If you keep having issues, please create a minimal demo that clearly illustrates the issue you're having.

 

Hopefully this helps

Happy Tweening!