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
Sequenced timeline animates the CSS properties in the sequence of steps using the mouse trigger.
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 combine the CSS-offsets with the sequence of steps to animate the properties, triggered by a mouse action.
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 | Example | Default | 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 | Example | Default | 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 -->
Sequenced offsets
The mouse trigger (as well as mouse and pointer triggers) is coordinate-based, which means it behaves differently from the time-based ones. As a result, the steps in the sequenced timeline must be defined using the start and end offsets.
Syntax
To define the steps, you need to specify the start and end offsets for each step inside brackets [], separated by a comma ,. Each item in the brackets represents a single step. The number of steps determines the number of items in each start and end offset brackets. Offsets can be defined relative to the viewport using percentages % or as absolute values using px.
Default
By default, the timeline is divided by the number of steps. For example, if there are two steps, the timeline’s 100% is split into two 50% offsets.
<!-- Default behavior can be defined like this -->
<!-- Shorthand -->
Custom
You can customize the starting and ending offsets for each step, as shown in this example. The first step starts at 10% of the viewport and ends at 80%. The second step begins at 80%, right where the first one finishes, and ends at 100% of the viewport.
<!-- Shorthand -->
Parallel
The advantage of using offset-defined sequences for coordinate-based triggers is that multiple steps can run in parallel, meaning steps don’t have to wait for one another to finish. In this example, the first step starts immediately at 0% of the viewport, while the second step begins right after that at 15%. Both steps run together in parallel until the first finishes at 75%. The second step then continues and ends at 100% of the viewport.
<!-- Shorthand -->