Quick tutorial time:
You may have seen an awesome mouse-controlled animation shared by imfine_thankyou on twitter recently:
https://twitter.com/imfine_thankyou/status/1088443342713569281
A couple folks asked to see how you might control a timeline with mouse position, so I put together a quick video:
The first thing you want to do is get the mouse position, but this depends on how you're embedding your document and what position you actually want. This demo assumes you want the X or Y position of the mouse in on the page, so you'd ideally set your document to scale to the entire width and height of the page. This is a pretty bulletproof method of getting the X and Y position of the mouse.
Next, you want to determine how you want the mouse position to interact with the time in the timeline. For this demo, I used the detected position divided by the document height & width to determine 'at what percent am I at the edge' of the X or Y value. This percent (which ranges from 0 to .999) is used to set the time in the timeline.
Video:
Note: In this video, I'm incorrectly using the 'duration' of the Main Timeline for the movement on the Y axis. I've updated the Hype document so that the final two lines are:
hypeDocument.goToTimeInTimelineNamed(Xposition * durationX, 'Main Timeline');
hypeDocument.goToTimeInTimelineNamed(Yposition * durationY, 'Y');
Document:
PositionMouse.hype.zip (20.6 KB)
Related Topic: