Draggable timeline

How do I...?
#1

Hi guys,
I am trying to create a draggable timeline, to make it scroll sideways. I want it to be draggable to the left and to the right with a smooth and natural behaviour. I guess I can’t combine the draggable behavior with the physics behavior, which would be ideal. What would be the correct approach to solving this?

Thanks

Farid

#2

Hey!
As described, it looks more like a slider. There is a corresponding extension for it. Watch this video as an example:

#3

Thanks,
I already made a simple slider. What I want to do is to animate the slider when releasing the button, with an ease out effect. So if I move the slider quick and release the mouse button the slider will continue to move in the same direction for, lets say, a half second and slowly stop moving. Pretty much as if you where rolling a wheel, the wheel would continue rolling when you release it.

Cheers

Farid

#4
  • If the slider “lags behind” the cursor, then you need to remember the position of the cursor on your “slider” and, for example, using the Tween behavior, move the slider to the desired position.
  • If you want to give “strength” to the slider for movement, you need to define the value to which the slider should be placed and use the Tween to adjust it.

Using the Tween behavior will allow you to adjust the smooth movement of the object to the desired point. Just specify the appropriate parameters.

#5

Thanks, I’m not sure if I understood your answer correct, but this is my solution and it looks pretty ok. If there is a better solution, feel free to post it :slight_smile:

image
image3074×1182 306 KB

Cheers

Farid

1 Like
#6

I also assumed a similar solution. Only I believe that it is necessary to move the slider to the cursor position.
Good luck =)

#7

Thanks! In this case i want the slider to stop close to where the user left it. I just want the stop to be smooth. Like this:

https://www.posh.se/open2/

//Farid

1 Like
#8

Looks good. But if you press the left mouse button and pull very hard, the remains are not quite natural. Perhaps it is worth considering the speed of the mouse movement and depending on this, make the “braking distance” more or less.
And also take into account if the cursor has gone off the edge of the screen. Otherwise, when returning, it turns out not a pleasant moment (the application thinks that the mouse button is still pressed).

#9

That’s true, but I didn’t find a way to get the mouse speed and direction.
Thanks for reminding me about the mouse out of the screen. The app will be running on a full screen touch display and it actually works fine when the users slip out of the screen with their fingers.

//Farid

#10

To determine the direction and speed you need:

  1. when the button is held down, remember in each frame (maybe less often) the current coordinates of the mouse (PrevPositionX, probably it is worth remembering only along the X axis);
  2. when the button is released, remember to other variables the current position (CurPositionX);
  3. calculate the difference between the previous coordinates and the current ones (PrevPositionX - CurPositionX). Depending on the positive or negative value, you can find out the direction where the cursor was moving, and depending on the length of this segment, how much distance was traveled, and, accordingly, how quickly the cursor moved.

This is one option if you need it. =)

#11

Thanks,
That was a good idea. I’ll try it out if I have the time. Deadline is today and I need to finish the layout and design and add loads of content :slight_smile:

//Farid