Hi TWeber,
Thanks for this, it’s an interesting problem.
I’ve dug into the cause, and I believe it’s related to the way you’ve scaled your sprite. Your original 10-frame sprite is 4000 pixels in height, making for a neat 400 pixels of vertical movement per frame. It is also an extremely precise image, requiring accuracy down to a single pixel to retain its composition (namely, the one-pixel border).
In your Pen, the image is scaled down to 3413 pixels in height, which equates to 341.3 pixels per frame. This is rounded up or down depending on the frame number, resulting in the slight positioning shift that you see, and made more noticeable by the one-pixel border flickering in and out of view.
So, I would say that this problem is caused by the inherent difficulty of retaining accuracy down to a single pixel in a responsive environment. As a workaround, I suppose you could include a small amount of whitespace around each frame (padding, essentially, and transparent if need be) to make the one-pixel shift less noticeable.
I hope this is helpful. If anyone else has suggestions for how to address this issue, I’d love to hear them!
Thanks again,
Tom