Drag controlled timeline actions

1

Hi Guys,

My first post but I’m completely stuck, I have been using hype for a while but have very limited JS experience. I have gone through nearly all the posts that feature the drag touch gesture but am struggling to find a solution

I have created a standard horizontal scroll bar that the user can drag to trigger events.

The bar functions correctly but I cant get any actions to run from from either the “playhead timeline” or the controlled “main Timeline”.

As the scroll handle reaches specific points I want it to launch an action either by playing a separate timeline, launching a custom behavior or by starting symbol timeline.

Would like to get it working on IPad, any support or guidance would be hugely appreciated

2

It would be helpful if You have a Hype project available for examining that shows your current set-up.

3

This is the test build for the scrollbar the aim is to get the symbol (green square - actor 2) to rotate by playing the symbols “spin timeline” by triggering the custom action “rotate_g” when the scroll handle (red circle) reaches the center marker (pink).

I have added the action trigger for “rotate_g” in the “playhead timeline” but it doesn’t fire when dragging the timeline.

drag_timeline.hype.zip (19.6 KB)

1 Like
4

Actions are not triggered on drags controlling a timeline. There’s a lot that could go wrong or unintended behaviors if this were a feature.

The workaround would be to pair the drag action with a run javascript action. It would require a bit of code perhaps, but you could store some state for the previous time and check against the current time and then manually trigger the custom behavior.

5

Thanks for the response, makes perfect sense.

As I’m a complete JS novice is there any example of the script that I could refer to and customise?

6

Unfortunately it isn’t really a simple bit of code since there’s a lot of questions like if the event should be re-triggered if it is scrubbed over, if there’s an opposing action for scrubbing backwards, if there’s anything that needs to be stopped, etc.

7

No problem,

The code I required wasn’t to complicated and i managed to work through it myself with some help from some other Javascript forums.

It basically launched the symbol timeline when the drag-able timeline reached a certain time, if the drag-able timeline value was higher or lower than the maker time it continues the symbol timeline in reverse.

8

Awesome, I’m glad you were able to get it! If you’re willing, feel free to share the code here since if someone has the same setup it could probably help them!