I want an image to roll off the screen to the right, but it's in the footer, so it can't start until after a visitor has reached the bottom of the page, otherwise they'll only see the top of the image rolling away.
I've got the animation working with CSS, but of course, it executes on page load and since I don't want it to repeat, by the time a visitor gets to the bottom they'll probably have missed it. I also don't want it to be retriggered if they go back up and come down again.
I'm sure this is pretty simple and there are lots of examples of triggering an animation when the element is in the viewport, but I haven't found one that waits until the whole element is in view rather than starting when first visible at the bottom of the screen.
I know this has to be handled with Javascript or jQuery, which are obviously mysterious to me, so if it requires loading a library, please tell me so in your reply.
Thanks in advance for any suggestions.