I would like to pick up the hint of CARL.
I don´t know your layout/concept, but you could define a 'hover area' as you want independent from e.g. the image.
In this example the area is the #container (marked with green border):
Your Pythagoras tree has brought me back to school - to my first contact with this 'phenomenon'.
In fact, the visual appearance was more important to me than the underlying trigonometric theorem:
both the plain formula as well as the graphic representation have a very positive aspect.
Therefore - to evoke this - here the attempt of a small animation:
Sure, I know you can calculate the necessary values and develop a function for random examples.
But I still need a couple of days ...
Off the record: while we call it Pythagoras' Theorem, it was also known by Indian, Greek, Chinese and Babylonian mathematicians plus a small group of OSU´s well before he lived !
Welcome to GreenSock Forums.
Please have a look to https://greensock.com/position-parameter
And: try to use visibility and autoAlpha instead of opacity; play with yoyo:true ...
I love the sounds of the sea, the seagulls and their screaming:
Question: Can I combine morphSVG with cycle?
repeat:-1, yoyo:true, ease: Sine.easeOut},0.3)
here are two interesting examples which could give some suggestions.
An Image slider with a cool code using the ModifiersPlugin coded by @OSUblake:
Another slider - concept of @Rodrigo - which provides perfect explanations especially the point "slideAnimating".
Hope this can be helbful ...
With highcharts.js I'm not familiar.
Here a 'hard' version (somewhat bumpy) to achieve the drag function :
onPress, onDrag, onDragEnd activates a #dragCover (z-index , background: red) ...
Perhaps one can help with these functions synonymous highcharts.js to pause mouseover etc. (?).