Pinned element only works in reverse scroll

[JesusMdz]

Im new using GSAP and I've created this component following a step by step video, also i tried many times with other exaples made from 0, and i dont find the reeason of why scrollTrigger only works when it hits the end of the scroll-end, when it should starts,my pinned element "right" just dissapears a,but in the codepens works perfectly, so i dont know what its wrong with my code, im working with next js 13 and have the same code as codepen 

once my pinned shows up, the element goes to the bottom of the page when i hit end again

there is my code 

"use client";

 

import { gsap, ScrollTrigger } from "gsap/all";

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

function Home() {

  const divRef = useRef(null);

 

  useEffect(() => {

    // const el = divRef;

    gsap.registerPlugin(ScrollTrigger);

 

    gsap.timeline({

      scrollTrigger: {

        trigger: ".gallery",

        start: "top top",

        end: "bottom bottom",

        pin: ".right",

        scrub: 1,

        markers: true,

        invalidateOnRefresh: true,

        toggleActions: "play none reverse none",

      },

    });

  }, []);

  return (

    <main>

      <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 spacer1"></div>

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

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

    </main>

  );

}

 

export default Home;

See the Pen poqZJap by jes-s-mendoza (@jes-s-mendoza) on CodePen

[GSAP Helper]

Hi there! I see you're using React -

Proper animation cleanup is very important with frameworks, but especially with React. React 18 runs in strict mode locally by default which causes your useEffect() and useLayoutEffect() to get called TWICE.

In GSAP 3.11, we introduced a new gsap.context() feature that helps make animation cleanup a breeze. All you need to do is wrap your code in a context call. All GSAP animations and ScrollTriggers created within the function get collected up in that context so that you can easily revert() ALL of them at once.

Here's the structure:

// typically it's best to useLayoutEffect() instead of useEffect() to have React render the initial state properly from the very start.
useLayoutEffect(() => {
  let ctx = gsap.context(() => {
    // all your GSAP animation code here
  });
  return () => ctx.revert(); // <- cleanup!
}, []);

This pattern follows React's best practices, and one of the React team members chimed in here if you'd like more background.

We strongly recommend reading the React information we've put together at https://greensock.com/react

Happy tweening!