GreenSock

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!

Hi there, in the codepen url (https://codepen.io/GreenSock/pen/XWMPLQg), the animation is what I was looking for but would like to change how animation is being triggered. For instance, on scrolling down of mouse the currently the second image is being revealed slowly and on scrolling upwards the it gets back to its initial first image slowly. So, is there a way to reverse/change  what is happening on scroll downwards at the moment  to scroll upwards and vice versa. So, the animation would remain same but the direction of scrolling of the mouse would change (would like to have what is happening currently on scroll down of mouse to happen on scroll up and what is happening on scroll up of the mouse to happen on scroll down of mouse).

Hey, Greensock, just an FYI because I spent the last hour or two pulling out my hair, if you leave 'will-change: transform' on a parent, the browser treats it as if it is a transformed element and it breaks fixed pinning. 

I was trying to see how much smoothscrolling was impacting performance by removing it temporarily and the 'will-change' I'd added for smooth scrolling kept it from working.  Might want to add to pinType docs. This is easy to overlook and not what I expected to effect it.

hi all, this maybe a question asked in the past, how can I include the code into a WordPress website