[Jumping on start animation when using Pinning]

I've been trying to use a pinning feature in my code and i've been experiencing my component jumping when it enters the trigger. However weirdly it works in reverse. Also i've noticed if I change my code I can get the pinning effect to work properly until i reload my web page where the jumping behaviour starts again. I have broken the component down to complete basics to rule out other things and i still see this behaviour. I'm out of ideas now so any help would be much appreiciated otherwise I will have to look into doing it with CSS position:sticky. I will attach code below.

Also I get the warning 'gsap-core.js:89 Invalid property pin set to true Missing plugin? gsap.registerPlugin()' in my console but i definitely have gsap installed properly as i am using it in other components that don't use pinning???

 

import React, { useEffect } from 'react';

import './SpiralTransition.css';

import gsap from 'gsap';

import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

 

function SpiralTransition() {

 

   

  useEffect(() => {

        gsap.to(".square", {

          duration: 1,

          x: 50,

          scrollTrigger: {

            trigger: ".square",

            start: "center 80%",

            end: "center 20%",

            toggleActions: "restart none none none",

            scrub: 1,

            pin: true,

            markers: true

          }

        })

        }, []);

 

  return (

    <div>

        <div className="div1"></div>

        <div className="div2">

            <div className="square"></div>

        </div>

    </div>

  );

}

 

export default SpiralTransition;