Animation triggers
Quick introduction on how to use various triggers to create web animations
Overview
Triggers play the animation when they are executed. You can think of the trigger as a listener that listens for various events. For example, when you hover over the element, the hover trigger is executed and plays the animation. TorusKit supports time-based triggers that are time-depended, and also the coordinate-based ones, that depends on the coordinates (position) of the input device event (scroll, mouse cursor).
Each trigger represents a unique timeline, so it is possible to have the same triggers with different properties on one element. For example you can use animate:scale(2) and animate:opacity(0.5) together freely.
Syntax
The trigger word represents thr trigger event such as hover, click, scroll, timeout, etc. Every trigger comes with its own default parameters, but you can customize them using the parenthesis () with the parameters separated by the , comma.
Responsiveness
You can restrict the resolutions at which a trigger becomes active. For instance, if you want the animation to apply only on large devices (lg) and above, but not on smaller ones, the traditional method is to set a default value for all resolutions, then specify the value for lg and up. However, this approach activates the trigger on all resolutions. Using the lg::trigger:css-property() definition, the trigger is applied only from the lg resolution and above. Read more about in Responsiveness documentation.
Syntax
The syntax for the resolution definition uses a specific :: double colon separator.
Example
Using the md:: will make sure that the animation set by animate trigger will play only on resolution md and up.
Time-based triggers
These triggers, as a name suggests, executes the time-depended animations. Means that animation progress depends on the elapsed time. These are the most common and used animation triggers. The list of supported time-based triggers within TorusKit:
| Trigger | Description | Example |
|---|---|---|
animate |
Animates the element automatically on page load | animate:scale(2) |
hover |
On hover and hover-out the element | hover:scale(2) |
click |
Triggers the animation on the click | click:scale(2) |
inview |
Executes the animation when element becomes visible in the viewport | inview:scale(2) |
class |
Triggers on class change (added or removed) | .show:scale(2) |
timeout |
Start the animation after passed time | timeout(start: 1s):scale(2) |
check |
Triggers the animation on checkbox check | check:scale(2) |
focus |
Executes the animation when text input is focused | focus:scale(2) |
Example
Coordinate-based triggers
Coordinate-based triggers use the current x and y positions of the scroll or mouse / pointer events to control the animation’s progress related to the viewport.
Example
| Trigger | Description | Example |
|---|---|---|
scroll |
Progress the animation based on the scrolled position | scroll:scale(2) |
mouse |
Progress the animation based on the mouse cursor position | mouse:scale(2) |
pointer |
Same as the mouse trigger |
pointer:scale(2) |
Parameters
Trigger behavior can be customized using parameters specified within the parentheses (). Each trigger can accept a varying number of parameters.
Syntax
Parameters are defined in the parenthesis () that follows the trigger name and are separated by the comma ,.
Example
In this example, we’ve restricted the mouse trigger’s axis to only include the x axis.
// Shorthand parameter name