Hi Hype Hooligans!
I was wondering if anyone had a solution to count up (and down) between set numbers (years) controlled via a drag with target numbers at set intervals?
I've attached a setup for the drag with the years. Looking for help with the logic.
Thanks!!
countUpOnDrag.zip (315.3 KB)
You're already on the right track. The idea with the AG Timeline is absolutely correct. The only thing you need to do is change the innerHTML of the 'Date' text field, just like I did for the first four dates. Additionally, I've increased the size of the bounding box around the drag button to prevent it from snapping back if you don't release it precisely.
countUpOnDrag_kt.zip (325.9 KB)
... another early bird... 
Thank you for taking a look at this fellas!
What I'm going for is an animated count up that stops at each date.
But...I have also realized that I would need to make the data monospaced to stop it bouncing around while counting up/down. To do this I think I would need to make each digit a separate number/layer and animate each one on and off.
What do you think?
Do you mean as it moves it counts to and stops at the fixed date?
Also do you mean each digit changes or whole year
Example:
When dragging from 1842 to 1895 the number should count up: 1843, 1844, 1845... and stop at 1895 when the Drag object reaches that number.
if your timeline would be linear it'll be easy, but as the timeintervals are totally different ...
Using the good old Hype Mutation Observer (4 years old now, time flies)
countUpOnDrag-max.hype.zip (330,3 KB)
PS: Could also be easily done with Hype Action Events, but I wanted to keep as simple as possible. Tracks the width of the element .year and adds 1800 (rounded) to set the .yearDisplay innerHTML based on it.
Max for the win!!
Thats exactly what I'm looking to do. Cheers!
Now I just need to figure out the monospace aspect and I'm off to the races 
You can split the number into 4 digits and make your own monospace.
countUpOnDrag-mono-max.hype.zip (332,0 KB)
Nice one @max,
That's pretty neat using the width as a counter.
You could also do away with the MutationObserver and just add the call to the function on the end of the existing on drag.
The function would just need to be
var year_ = hypeDocument.getElementById('year')|
document.querySelector('.yearDisplay').innerHTML = Math.round(hypeDocument.getElementProperty(year_, 'width') + 1800)
(Although , just realised why yo use MutationObserver. due to the continue timeline.)
Just remembered
Where we can use the Math Functions in the easing to keep track of timelines.
This uses width idea the Math functions idea in the link
countUpOnDrag-max_MH_1.hype.zip (331.1 KB)
Fully native to Hype and now following the timeline continue after drag
Thank you for all the contributions here!
It's all working perfectly!!
