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;