I'm a GSAP noob. I was looking into how to create an animation that behaved slightly differently when you scroll back up rather than just reversing. I came across this forum post
which has this example: https://codepen.io/GreenSock/pen/eYJjxVb Although this showed me how to achieve what I was after, my version AND the example animation both exhibit the same unexpected behaviour as explained below . I've forked the example where I've simply increased the duration and the distance of movement, set all opacity occurrences to 1 and added markers. As expected, when you scroll down, the squares move up. When you scroll back up, the squares move back down.
https://codepen.io/Gsapper/pen/OJjEwZN
To see the problem, rerun the animation and scroll down until the start marker just passes scroller-start. As soon as the left square starts to move, scroll back up a little bit until the start marker is just below scroller-start. What you should see is the square on the right moving up while the other two squares move down. Any help explaining why this happens would be appreciated.