Humbas

Hello. I am developing a peculiar website that needs to activate/deactivate animations by horizontal scrolling. So I created a sprite css animation that describes a walking movement. The objective is to activate the css sprite when the user starts moving to the right and stops the animation when the user stops. For that I created 2 css classes in which each sequence is describe. So far I was only able to make the sprite move but the character does not follow the scroll or stops when not scrolling (I am very newbie using gsap). Any ideas?

here is a temporary link to check current result:

https://humbertoventura.com/michael/text.html

also an image

Thanks in advance!