Mouse-linked animations
Create mouse-triggered (or pointer-triggered) animations that plays as you move the cursor
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.
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.
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.
// Offset-based timeline
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.
// Offset-based timeline
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.
// Offset-based timeline