danshk Posted April 3 Share Posted April 3 Hello community. I am facing a problem that I am trying to make oppositional content scroll on my page. The idea is that when I scroll down, my content on the left side scrolls down with normal behavior and the content on the right side from the last block to the first block. But the scrolling in my example is out of sync, my content on the right side scrolls like twice as fast as the content on the left side https://codesandbox.io/p/sandbox/opposite-gsap-9p4yh7?file=%2Fsrc%2FApp.tsx See the Pen src by p (@p) on CodePen Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted April 3 Solution Share Posted April 3 Hi, There are a few issues in your demo. First avoid animating the top position, that will trigger a layout and paint operations in the browser: https://web.dev/articles/animations-guide#triggers https://web.dev/articles/animations-overview#pipeline Is better to animate transforms instead of top as shown in these demos: See the Pen KKeJaqW by GreenSock (@GreenSock) on CodePen See the Pen vYjqXLm by GreenSock (@GreenSock) on CodePen Finally your sections don't match because by default a GSAP Tween has an ease of power1.easeOut: https://gsap.com/resources/getting-started/Easing That means that the animation will start faster and end a bit slower, in this cases is better to use ease: "none" so the progress is completely linear throughout the entire animation: gsap .timeline({ scrollTrigger: { trigger: refVerticalContainer.current, start: "top top", end: "bottom-=" + window.innerHeight, markers: true, scrub: true, }, }) .to(refRight.current, { top: "0vh", ease: "none", // <- LINEAR EASING }); Of course that is just how your code should look, I still recommend using transforms instead of top. Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now