Problem: I want to know how I can get the distance (in pixels) between the swipe start and swipe end point or a possible workaround.
Saola Animate version: 2.7.1
OS: Wndows 10 1909
Notes: I’m trying to create an image comparision slider (without any external library). For that, I have 2 images (each in their seperate group). Both those groups have their overflow set to none. I have created a timeline named Slider. In this timeline, I have animated the width of the group on the top. With its x-transform-origin set to 0, the width of the group is changed from say 100px in the start to 0px in the end (thus, revealing the image underneath). Lastly, I have create a triangle to act as a drag handler. Even that’s animated in the Slider timeline according to the group. So, I was looking for a way to detect how long a user has swiped, which I can then possibly convert to percentage and set the timeline seek (of Slider timeline) to that percentage out of its total duration. Is this possible? I have attached a sample document to help understand what I mean.
You can get swipe distance from the event parameter e, for example:
var distanceX = e.iData.stop.pos.x - e.iData.start.pos.x;
var timeline = doc.getTimeline('Slider');
timeline.seek(timeline.getTimestamp() - 10 * distanceX);
However, swipe event just fires once when the mouse button is released, it doesn’t fire continuously when dragging.
You can see this thread for using drag event (my answer) or mouse move event (@mackavi’s answer) to control timeline: Move forward and back timeline while moving mouse left/right
I see, so, that’s not of any use to my document then. I need it to work while dragging.
I read the discussion on the link you posted and it’s quite similar to my case. However, I can’t really think that @mackavi’s answer there would work for me. It might, but, I guess, it will be very choppy. Though, that might be my next attempt if this one doesn’t work.
I checked your asnwer and found it quite useful. Rather, it’s exactly the kind of thing I would need (however, I might have to try a lot to add the touch support). It’s working in your example document, but, for some reason, it’s not working in mine. It’s doing nothing in the preview (not even producing any error in console). I just used your code as it is (except for the few document-sepcific changes like Timeline name and Element name). Could you please check why this is happening?
To show errror in the browser console, you can add Saola.logDebug.disabled = false; to your script.
For your convenience, I’ve fixed your script as in this attachement: slider-fixed.saolapack (99.3 KB)
Now you need to make it work on mobile devices and when the scene is scaled (by the document AutoFit feature).
The updated script works, not the best, but, it gets the job kinda done. The problems with that are, on each drag start, the Drag handle moved a little upwards and also, the handle isn’t able to go completely outside of the image area. But still, this is a good point to start.