Making an action work while dragging a timeline

1

Hi guys, I got suck on something relatively simple.

Simple scene, text scroll by mouse scroll or dragging a handle.
If you scroll through the mouse wheel the text timeline comes by an action and executes this action.
Same text scroll now dragging it by hand with 'on drag' command,. This time the action on the timeline does not execute while the text scrolls by.

Is there any way to make this work for both?
action_by_dragon.hype.zip (116.6 KB)

2

attach this js-function as drag-behavior:

const timelineName = 'MainText';
const initTime = 1.5;
const targetTimelineName = 'ball';


let currentTime = hypeDocument.currentTimeInTimelineNamed(timelineName);
hypeDocument.storedTime = hypeDocument.storedTime || currentTime;

switch(true){

case ((currentTime > hypeDocument.storedTime) && (currentTime > initTime)) :
hypeDocument.continueTimelineNamed(targetTimelineName, hypeDocument.kDirectionForward, false);
break;

case ((currentTime < hypeDocument.storedTime) && (currentTime < initTime)) :
hypeDocument.continueTimelineNamed(targetTimelineName, hypeDocument.kDirectionReverse, false);
break;

default : break;

}

hypeDocument.storedTime = currentTime;
2 Likes
3

btw ... it might be a good approach to avoid scroll-events:

on topic: Hype ScrollKit (Scrollama, Intersection Observer and more)

or: Track Intersections between Hypeelements

1 Like
4

Ahh, uhm... Ahhh I see! :grinning:

Thank you so much for this. I haven't used Hype in almost a year getting back into as a non-programmer is a bit rough. I'm not sure where to actually add your code, on the 'on drag' action?

But reading on, on your comments I probably figure out an other way to get things rolling.

Cheers! :+1: :+1:

5

just add the code as a second behavior to the element that controls the timeline on drag ...

1 Like