Mouse-linked animations

Overview

The mouse / pointer linked animations has the same behavior as a scroll-linked one, so the information on this page is the same as on scroll-linked documentation.

The mouse-linked animations adjust in real-time based on the position of the cursor. The are linked to its position and the screen offset. This is why the timeline animations of the mouse / pointer trigger are based on an offset system. They use the screen offset to determine the progress of each step.

Sequenced timeline

A sequenced timeline for the mouse trigger differs from time-based ones (like hover, inview,…). As it was mentioned above, it uses the offsets to set the flow of each step. By default, the offsets are automatically computed according the number of steps, with the offset distributed accordingly across the screen.

Default example

As you know, TorusKit will by default distribute offsets evenly according the number of steps. This example contains two steps, so each step will take up the 50% of the screen.

Custom step offsets

We can rewrite the example above by using the start and end trigger parameters to create a custom step flow. The start parameter defines the start offset of each step in the array defined within square brackets []. Each percentage value in the array represents one step. Learn more about this syntax in the Mouse trigger documentation.

Multiple properties

You can add more then one property into each step.

Offset-based timeline

Unlike the sequenced timeline syntax described above, the offset-based one is the same as in the time-based triggers. Each step has its own percentage offset starting with a 0% and finished with 100%. You can set the initial values of the animation in 0% offset (step).

Example

This simple example shows how easy is to create a mouse-linked animation using TorusKit’s offset system. The fist step with 0% offset is used to set the initial (starting) values of all properties in the animation.

Multiple properties

As usual, you can add as many properties as you need to each step.

Custom initial values

If you need different initial (starting) value of your animation, just add them into the first 0% step.

Custom property duration

You can set a custom property-level transition duration. Because it is a mouse-driven animation, the duration means how long the property should animate after the mouse stops. In this type of animation timeline, steps are not depended on each other, and can run in parallel. You can see this in the example below, that the translateX has a custom 5s duration, but other steps are not waiting for it to finish, but are continuously animated according their offsets.

Options

Options definition differs from a time-based triggers so please check the Mouse trigger parameters for more. But here are the couple of examples how to fine-tune the animation behavior based on axis of the cursor.

Axis

The axis trigger parameter is used to control which movement axes are considered when capturing cursor movement in your animation. By setting this parameter, users can limit the movement tracking to either the x (horizontal) axis, y (vertical) axis, or both. To define the axis, use the axis:{both | x | y} parameter in the mouse trigger.

both axes

By default, the mouse trigger takes both x (horizontal) and y (vertical) axes into account when capturing the cursor’s movement. The starting point is on the top-left corner of the screen, and the finish on the bottom-right one.

x axis

Limits the tracking to only the x axis. Only changes in the horizontal position of the cursor will be captured. Vertical movement will be ignored.

y axis

Limits the tracking to only the y axis. Only changes in the vertical position of the cursor will be captured. Horizontal movement will be ignored.