scrolltrigger Opposite Scroll Content Vertical

[danshk]

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

[Rodrigo]

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!