CODEWITHSUNDEEP
htmlnext.jsgsapscrolltrigger
cruxi5
cruxi5

Reputation: 1

GSAP Pin property not working properly in NextJS

So i was trying to learn gsap and wanted to implement a smooth animation where i can scroll down a page and then a long word just kinds of scrolls horizontally and gets pinned while scrolling using the scrollTrigger plugin of gsap , i was following along a tutorial and i followed a bit but then ran into this problem where my entire code upto the pin : true works perfectly fine and as soon as i add it , my entire div gets shifted out of the layout , as if margin was given , when i scroll back it it restores itself. Yeah this is kinda long but idk how else to explain my doubt , anyway here is the code :

This is what the main _app.js returns:

  return (
    <>
      <div className='h-[100vh] w-[100vw] bg-blue-300 flex justify-center items-center'>
        <div ref={box1Ref} className='h-[200px] w-[200px] bg-red-400'></div>
      </div>
      <div id='page2' className='h-[100vh] w-[100vw] bg-blue-500 '>
        <h1 className='text-[35vw] text-center'>EXPERIENCES</h1>
      </div>
      <div className='h-[100vh] w-[100vw] bg-blue-700 flex justify-center items-center'>
        <div ref={box3Ref} className='h-[200px] w-[200px] bg-red-800'></div>
      </div>
    </>
  )

as u can see i wanted to apply the horizontal pin scroll to the h1 tag inside the page2 div using this, the code is inside a useEffect() hook:

    gsap.to(
      "#page2 h1",
      {
        x : '-130%',
        scrollTrigger: {
          trigger: "#page2",
          scroller: 'body',
          start: 'top top',
          markers : true,
          end : 'top -100%',
          scrub : 2,
          pin : true,
        }
      },
    );

anyways, the entire code and animations work fine until the pin:true is added, i hope im using the right imports :

import React, { useEffect, useRef } from 'react'
import gsap from 'gsap'
import ScrollTrigger from 'gsap/dist/ScrollTrigger';

Please let me know if i made any error

Just before the start is triggered

As soon as it triggers start

This happens when i scroll down and then scroll back up

Upvotes: -1

Views: 199

Answers (1)

NullEe
NullEe

Reputation: 326

i tried your code and its seems working fine! but instead of useEffect i used useGsap from @gsap/react also import ScrollTrigger from "gsap-trial/ScrollTrigger"

if you are in page router just remove 'use client'

here is the full code

/libs/gsap.ts

"use client";
import gsap from "gsap";
import { ScrollTrigger } from "gsap-trial/ScrollTrigger";

ScrollTrigger.defaults({ markers: !process.env.production });
if (typeof window === "object") {
 gsap.registerPlugin(ScrollTrigger);
}
export default gsap;

page.tsx

"use client";
import React from "react";
import { useGSAP } from "@gsap/react";
import gsap from "@/libs/gsap";

const Page = () => {
 useGSAP(() => {
  gsap.to("#page2 h1", {
   x: "-130%",
   scrollTrigger: {
    trigger: "#page2",
    scroller: "body",
    start: "top top",
    markers: true,
    end: "top -100%",
    scrub: 2,
    pin: true,
   },
  });
 });
 return (
  <>
   <div className="flex h-[100vh] w-[100vw] items-center justify-center bg-blue-300">
    <div className="h-[200px] w-[200px] bg-red-400"></div>
   </div>
   <div id="page2" className="h-[100vh] w-[100vw] bg-blue-500 ">
    <h1 className="text-center text-[35vw]">EXPERIENCES</h1>
   </div>
   <div className="flex h-[100vh] w-[100vw] items-center justify-center bg-blue-700">
    <div className="h-[200px] w-[200px] bg-red-800"></div>
   </div>
  </>
 );
};

export default Page;

Upvotes: 0

Related Questions