Dagmawi

Thanks for your thorough response. I got it fixed now.

In this Minimal Reproducible Example in which gsap ScrollTrigger is used, the trigger element gets an unintended translateY style property when its start hits scroller-start causing the trigger element to kind of jump downwards. What may be the issue? App.js and App.css body { margin: 0; } .div1, .div2 { height: 100vh; } .div1 { background-color: pink; } .square { width: 150px; height: 20vh; background-color: fuchsia; } import { useEffect } from 'react' import './App.css' import gsap from 'gsap'; import { ScrollTrigger } from 'gsap/all'; function App() { useEffect(() => { gsap.registerPlugin(ScrollTrigger); gsap.to(".square", { x: 1000, duration: 8, scrollTrigger: { trigger: ".square", start: "top 80%", end: "top 30%", scrub: 4, toggleActions: "restart none none none", pin: true, markers: true, } }) }, []); return ( <> <div className="div1"></div> <div className="div2"> <div className="square"></div> </div> </> ) } export default App