While scrolling, fix section on the left, and scroll section on the right

[willdzoan31]

What I want to achieve is like this website: https://dxc.com/us/en

 

Basically when you scroll to that section, the one on the left will be fixed, while you keep scrolling, it will scroll the section on the right. I've tried to pin the left section, but somehow it always produce strange behavior

 

Codesandbox: https://codesandbox.io/s/busy-sky-6pjo3o?file=/src/App.js

[elegantseagulls]

5 hours ago, willdzoan31 said:

but somehow it always produce strange behavior

This is entirely due to your CSS/HTML structure. You may want to look at how to properly use flexbox and margins to get the layout you'd want, then tackle the ScrollTrigger. For the ScrollTrigger, you could also consider setting up a separate Trigger for each section, and also one for the pin, so that you have full control when each element enters the viewport.