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
