Drag controlled timeline actions

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

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

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

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.

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?

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.

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.

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!