Mouse and pointer trigger
Mouse-linked animations that plays as the cursor moves
Overview
A mouse / pointer trigger animates properties as the user moves the cursor over the page.
The animation begins playing continuously when the element becomes visible in the viewport at the bottom of the screen and finishes when it reaches the top of the viewport. You can customize the offsets for these animations in the trigger’s offset parameters.
The initial value of CSS property is computed automatically (unless explicitly defined) and animated into the final value that is defined in the property parentheses ().
Syntax
To activate the mouse trigger, use the mouse keyword. A CSS property is animated when the user moves the mouse cursor the page.
Examples
These examples show the usage of the mouse trigger in the various timeline types together with the combination with the different triggers.
Discrete timeline
Discrete timeline is the basic timeline that animate the properties when the mouse trigger is executed on the element.
Sequenced timeline
Note: A
pointer/mousetrigger (as well as ascroll) automatically converts the sequenced timeline into an offset one, because they are coordinate-based and the animation playback is relative to the viewport and not the time.
By default, the mouse trigger’s sequenced animation steps are divided according to their number. For example, if you have two steps (shown below), the timeline progress will be split two parts, with each step playing over 50% of the viewport.” To customize this behavior, check the sequenced timeline offsets parameters.
Offset-based timeline
Offset-based timeline specify the playback of animation steps according to the specified offsets.
Asynchronous playback v3.1.0
The offset timeline allows you to animate steps asynchronously - they can run in parallel. Use {start}%-{end}%:[] syntax to set the start and end offset of each steps. Steps can even overlap!
Combination
The mouse trigger can be combined with any other available triggers.
Parameters
Trigger can be customized with the parameters that are defined within its parentheses ().
Offsets
The start and end offsets define when the mouse trigger should begin or end. By default, the 0% reference point for the offset parameter is on the left side of the screen, or the top-left corner, depending on the method or property options used. The 100% reference point is on the right side of the screen, or the bottom-right corner.
To improve understanding and simplify usage, we have restricted the trigger to only operate on the x axis in the examples below.
start offset
By default, the start offset is set to 0%, meaning the animation trigger point is positioned at on left edge of the screen. Adjusting this value allows you to modify when the animation starts, triggering the animation later as the element reaches the specified offset.
| Name | Value | Default | Example | Shorthand |
|---|---|---|---|---|
start |
{number}{% | px} |
0% |
mouse(start: 10%) |
mouse(10%) |
<!-- Shorthand -->
<!-- Start the animation when the element reaches `100px` from the bottom of the screen -->
<!-- Shorthand -->
end offset
By default, the end offset is set to 100%, meaning the animation trigger point is at the right (or bottom-right) edge of the screen where the animation ends. Changing this value adjusts when the animation completes, causing the animation to end earlier as the element reaches the specified offset.
| Name | Value | Default | Example | Shorthand |
|---|---|---|---|---|
end |
{number}{% | px} |
100% |
mouse(end: 10%) |
- |
<!-- Stop the animation when the element reaches `300px` from the bottom of the screen -->
<!-- No shorthand -->
Combination
You can also combine the start and end offsets to fine-tune when the animation is triggered and completed within the viewport.
| Name | Value | Default | Example | Shorthand |
|---|---|---|---|---|
start | end |
{number}{% | px} |
0% | 100% |
mouse(start: 20%, end: 50%) |
mouse(10%, 50%) |
<!-- Shorthand -->
<!-- Revert the animation when the element reaches `100px` from the bottom of the screen -->
<!-- Shorthand -->
Axis
x axis
<!-- Shorthand -->
y axis
<!-- Shorthand -->