Here is a non-coding example just using a timeline & the Hype interface; which utilizes mouse clicks on the arrowheads.
Project Here: Compare_JHS-v1.hype.zip (344.6 KB) - Demo Here.
The manual drag is where the problem crops up as I am using the “On Drag” command which has shown issues with flexible designs. Still works - but it isn’t slick - no matter what speed You set it to. Instead, I think the solution here might be to get the mouse location “On Mouse Down” ~ “Touch Start” and set the width of the "Overlay"group (please see image at bottom) to match the mouse’s horizontal location as it is dragging. In my vision the “Divider Bar” would not jump to the exact mouse position, it would simple track it - e.g. the mouse is dragged horizontally 50 pixels to the left the “Divider Bar” moves 50 pixels to the left. I think this would be a nicer effect than a sudden jump of the “Divider Bar” to the mouse location, assuming it was not on the “Divider Bar” to begin with.
I’m out of time right now but this “drag” solution will require a bit of JavaScript. Two ideas (which I’ve never worked with before)…
The one mentioned just above using the addEventListener for the (horizontal) mouse movement: “onmousemove Event”.
Another avenue that might prove productive would be to track the horizontal mouse movement and match it to the timeline. I’m believe I’ve read about this on the Forum, but no time to research just now.
Edit: Found one post that looks like it covers the mouse-timeline topic, haven’t examined yet…
Control mouse of main timeline
Edit :
Another thought about using the “mouse move”~ timeline sync. You would probably want to create another timeline which did not have the arrowheads show up in the center when You were dragging (as does the current one, called “Slider”). Also, another nice effect would be to have the “Divider Bar” animate (glide) to the spot where the user clicked in the image.
The "Divider Bar" - the right border of the "Overlay Group"
