TomHoliday28

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;