I'm struggling with horizontal scroll implementation. The main goal is to change default vertical scrolling to horizontal and based on actual position, background opacity which is fixed and on center of my screen. In image below I tried to visualize it
Based on codepen, I've created my implementation with gsap + scroll magic.
Unfortunately I couldn't achieve smooth scrolling with it, so result isn't satisfied me. Here is a example of how smooth scrolling could looks like.
I was trying use that code with scroll magic and implementation of horizontal scroll below, but there was a lot of weird artifacts via scrolling. I'd like to give up with scroll magic and use only gsap, but I could't figure out how to properly implement it. I need to track scrolling, where background image (fixed position) have to change opacity depends on visible section. There is any option using gsap to achive it?
I'd be grateful for some examples