I’ve been thinking about making something similar, but I need the line to start in the middle so it can be dragged left/right. I also want to have other information around the edges, hence why it’s in the middle:
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"
Thank you so much!
I have added H_classen’s resize JS to it and it’s cause a strange problem with moving the bar. It still works, but the smaller the screen gets the more you have to drag the bar for it to move.
controlling a timeline via drag gives you the opportunity to to choose a speed-property. this is constant. which means that the drag is not 1to1-corresponding to the timeline …
you’ve got to write a own js-control to avoid this.
Is there an easy way to add the words ‘Before’ and ‘After’ which would appear once you reveal a larger part of one of the images? I tried doing it with a timeline animation but failed miserably.