bouncing-balls | Bouncing balls simulation using plain JavaScript | Canvas library

I have two play-once GIFs similar to the ones attached. I'd like to have the first GIF replace the original PNG upon mouseover, but even if someone removes the cursor from the image, finish playing the GIF so the last frame is in place before the mouseout GIF, which is the reverse of the previous one, replaces it and plays. I'd also like the original PNG to replace the mouseout GIF when it is finished playing, too. So, original > mouseover long enough to finish playing > mouseout long enough to finish playing > original.

I tried a javascript I found on here, and it worked to replace the images, but the mouseover GIF kept playing every now and again (even while the cursor was still on it) even though it is a play-once GIF (the script must have kept refreshing the GIF or something).

I'd keep the script in an external file as opposed to inline, of course. I know enough javascript to edit scripts, but not write them from scratch. jQuery is available, if needed.

Thanks for your help!

mouseover GIF mouseout GIF original PNG

ETA: This is what I tried before, although this wasn't the final version of it since I was trying different things on that site that lets you try scripts on, and I think I had the timing set to 2888. I don't have the other script since I didn't save it: