Dynamic Image Animation based on Mouse Movement

Hi All,

We have made a dynamic image animation using xml. We are attaching the source code herewith. At present, when you place your mouse over the images, the animation will start backwards. I.e., it will reverse the way the images are loading.

We want this animation order (normal and reverse) to control based on the mouse movement. By default, now the images are animating in one direction. That is fine now. But, we want the animation should get reversed when you place your mouse at bottom of the page. And again when you move the cursor towards top of the page, animation should again start as normal (vice versa).

Any idea how we can achieve this task using mouse placement?

Thanks in advance.