Move forward and back timeline while moving mouse left/right

Problem: How can I scroll forward and back trough the timeline when moving my mouse left / right (with lmb pressed) over an object?

Saola Animate version: 2.7.1

OS: W10/64


Hi Klaas,

Timeline will scroll automatically when you drag your mouse out of its left/right edge.


There is more ways to look at my question I realize now ;-).

What i mean is when I have an object in a previewed animation in the browser with objects on the screen. When I put my mouse on an object, click with lmb and move to the right or left. Then I want to make an object e.g. turn (like a steering wheel) when moving to left/right like the user is turning the wheel. In my perception in this scenario the mousepointer moving left and right is moving the timeline left and right so the animation that is developed on the timeline takes place then.

Perhaps this behaviour can even be accomplished a lot easier in another way?

Hi Klaas,

I can understand you question now :grinning:
Saola Animate doesn’t support drag event and action to control timeline yet so you need to write your own script or use a 3rd JavaScript library to do that.
The script should handle drag event, calculate the drag distance, convert the distance to timeline timestamp, and update the timeline at that timestamp.

For demonstration purpose, I’ve prepared a sample using jQuery UI draggable:
scrub timeline.saolapack (2.9 KB)
But please be noticed that jQuery UI need to be patched to make it work on touch screens, so you should find a better lib.


Handling rotation of objects can be achieved using Cartesian coordinates to Polar coordinates if you need accuracy such as with clock hands.

However, if you simply want something non-coding, then you can use hotspots to set the rotation amount. just move your mouse left or right over the wheel.

steering.saolapack (2.9 KB)

The project just uses hotspots with a mouse over event. By naming the hotspots the value of the rotation amount, each one uses the same function to set the CSS rotation value for the steering wheel.

Hi Toan, thank you for your reply. For me that is to techical for the project i’m working on.


Hi Mackavi,

Thank you for this options. Yes I was looking for a simple option and not for coding and I will look into this tomorrow. I’ll let you know how it works out for me.

This is working nice! Still you need javascript for this that I’m not confortable with but I can see how you put things together.

Thanks again for the example

I have been playing around with JS and with the example of Mackavi. If I look at the documentation of Saola there is a list with events and actions but how to make use of them? Perhaps this is not a smart question but to get from ‘Scene Activate’ in the documentation to the code that works in the example when the screen is activated I suspect that in the first place I must create an event handler with the “scene event handlers” selection. But from there I don’t know how to get it working? Further I want to get code activated when the timeline is updated. I see there is an event ‘Update’ for the timeline but how to get that working?

Hi Klaas,

You can add events anywhere you see the lightening bolt symbol.

Image 1

The one highlighted in the image above is for the timeline.

Clicking that displays the dialogue where you select the event type (below).

Image 2

Clicking the Plus symbol allows you to select your actions for that specific event. In the image, I’m selecting a Javascript action for the Update event.

Image 3

It’s also worth knowing that with Timelines you can use triggers as well as the Timeline events.

To add a trigger, you the icon next to the Timeline events icon.

Image 4

Drag the playhead to the position on the timeline when you want to trigger the event. Click the trigger icon and the events dialogue will appear.

A red dot will appear to show that you have added a trigger (you can double click this to edit the trigger and also move it to a new time).

A label (such as next scene) can be added by clicking the flag icon above the trigger icon to help you identify your triggers.

Hi mackavi,

Thanks a lot for this explanation! It’s great to be in this forum to have all the help needed sometimes.

After clicking around and trying a lot of buttons and options I just found this all before looking into this forum though :wink: and I wanted to update my progress when I saw this explanation. I have been looking for this for some time now because I could never make the connection on clicking on the specific places to get to the right events and actions. Now I can move on with my project.

Again thanks a lot!

Thank you @mackavi for your active participation to help other users.

Hi @Klaas, you can find lots of tutorials for Saola Animate from its tutorial page:


Hi ToanLS,
Thanks for the reply and information.
Yes I have been looking at the videos a while ago but did not get back on them as most explanation is not for JS over there. And I so did still not make the connection on how to add additional events from the places Mackavi showed in his helpful explanation as of course I had seen the obvious ones. After looking into the manual again and finding out all the events that SHOULD be available I looked again in depth and found the answer just before Mackavi posted his help.
What perhaps would have helped me sooner to find the link between all components I needed is to put in the manual the JavaScript section and things that are related directly like the events and actions closer together and/or to make more links between them or a short example. Perhaps this can help others too to speed up sooner.

1 Like