Slider to control frames in timeline?

#1

Hi all, is there by chance a way to control the timeline with a slider?

I want to be able to drag a slider back and forth such that the timeline moves forwards/backwards as it corresponds to the sliding action.

Preferably a method that is not particularly coding heavy… :grinning:

Thank you.

#2

Hi furmie!

The following uses only Timelines - no code. Demo: Timeline_Scrubber.hype.zip (22.2 KB)

Note: This file is adapted from a demo about controlling video timeline by @jonathan here.

The following overview gives You the general layout of things. The “Demo” file itself should then be mostly self-explanatory.

Over View:

The “Scrubber Group” controls two timelines:

• “Scrubber” timeline: The “Thumb” element on the “Slider”.

• “Element Move” timeline: Moves the “Element” circle in correspondence with the “Thumb”.

You will notice that the distance moved is not the same for the “Element” and the “Thumb”.

While both timelines are the same duration (2 seconds) - the “Left” property of the “Element” is set to move much farther in pixels (“Left” property) in this amount of time than the “Thumb”.

By adjusting the “Left” position of the “Element” at the 2 second mark You can create a much shorter or longer range in relationship to the “Left” position of the “Thumb” at the same point in time… i.e. the sliding range.

Overview
Overview798×675 73 KB

5 Likes
#3

@JimScott this is awesome! Thanks for the detailed explanation and solution. :+1: :+1: :+1:

1 Like
#4

Hello Jim,

thank you for your sample file.
I tried to recreate this, but I have a problem with THUMB speed control on drag:

previewing on Chrome, the thumb element, instead of following the movement of the pointer, goes faster (I attach the file).

slider.hype.zip (83.5 KB)

What am I doing wrong?

Thank you for your help
Ila

#5

Just play around with the "speed" setting to get it just right.
You can also reverse the direction if you want.

2 Likes
#6

thank you @MaxZieb!

#7

It works for me! It is really very important to pay attention to the relationship between the width of the slider and time: 100px=1 sec. Also it's need to set "Linear" effect instead of "Ease Out" and "Ease In" to the knob!
Now I need to make my slider more complicated, can you help me with that?
I need setup these things:

  1. The user cannot continue forward in the webpage if he has not fully dragged the slider to the end of the line;
  2. After the user successful reach the end point of the slider, then the webpage automatically move down with 200/300 px with ease out effect;
  3. If the users let down the slider knob somewhere in the middle of the line them the knob goes back to the start point, again with ease out effect;
  4. Can I set sound effect when the knob reach the end of the line?

This is my file: DoubleSlider_v1.zip (431.5 KB)

Thanks a lot!

#8

To clarify this point since there's not a mechanism in the document currently: do you want to restrict moving on until the slider has moved to the end, or do you want to always be able to continue forward (and if so via what mechanism)?

You can add a timeline action at the end of the scrubber timeline to start an additional timeline or run other actions, like playing a sound.

If you chose "continue after drag" on the On Drag actions, it can snap back if it is at less than 50% done, and will snap forward in other cases.

Otherwise you'll need a little bit of JavaScript to determine if you want to snap back; this would be an extra action on your On Drag handler:

	if(event['hypeGesturePhase'] == hypeDocument.kHypeGesturePhaseEnd) {
		if(hypeDocument.currentTimeInTimelineNamed('Scrubber') != hypeDocument.durationForTimelineNamed('Scrubber')) {
			hypeDocument.continueTimelineNamed('Scrubber', hypeDocument.kDirectionReverse);
			hypeDocument.continueTimelineNamed('Element Move', hypeDocument.kDirectionReverse);
		} else {
			/* optional -- add code here if you want to do something on completion */
		}
	}

This snapback will be slow though, so you may either want to change the timeline duration (and adjust the speed percentage in the on drag handler to match those changes), or do another timeline that is faster/snaps back.

Yes, you can use the play sound with the timeline action suggested to solve point #2 or trigger something in the else block in the code above.

1 Like
#9

Thank you Jonathan!
I'll try!

1 Like
#10

I need to create a long page where there will be such sliders in several places. But they will tear the page into separate, smaller pieces. When the user reaches a slider but does not drag it all the way, he should not be able to proceed to the next part of the page, ie. to scroll down. Only when he slides the slider successfully, then the ability to scroll further will be unlocked.

Yes, how can I do that? Where can I find lesson about it?

"Continue after drag" is very cool option, but I'm still wondering how can I set this breaking point between snapping back and continue straight to be for example on 80% not 50%?
Maybe I can do that with the code you mentioned but I didn't understand where to put it and how to control it.

Thanks a lot!

#11

if a document is longer than the viewport it'll be scrollable. the easiest way to disable this is to set the body to overflow hidden, but i guess it'll be kind of ugly cause the scrollbar will appear and disappear.
you'd be better to go with scenes to enable progress ...

#12

https://tumult.com/hype/documentation/#timeline-actions

The key is in the line that compares the current time to the duration:

		if(hypeDocument.currentTimeInTimelineNamed('Scrubber') != hypeDocument.durationForTimelineNamed('Scrubber')) {

Instead of saying != (not equals), you can test to see if it is greater than the duration multiplied by a certain amount like 0.8. The new line would be:

		if(hypeDocument.currentTimeInTimelineNamed('Scrubber') > (hypeDocument.durationForTimelineNamed('Scrubber') * 0.8)) {