Triggers for web animations
Quick introduction on how to use various triggers to easily create different CSS animations
Overview
Triggers, as the name suggests, start the animation on various events. It doesn’t need to be just the standard animate
trigger. TorusKit supports numerous triggers such as hover
, click
, scroll
, etc. that execute the animation. You can learn more about the triggers in detail on the dedicated Trigger subpage.
Syntax
Examples
These examples show how to use the simple TorusKit syntax to create various animations. We have choose one trigger from three different trigger groups:
- automatically executed:
animate
- user interaction-driven:
hover
- user scroll-driver:
scroll
Each of these triggers has one Discrete and one Sequenced timeline type example.
Animate
The basic animate
trigger starts the animation automatically on page load.
// Sequenced
Hover
The hover
trigger starts the enter animation when user hovers over the element, and vice versa, starts the leave animation when user hovers out the element. Unlike the CSS, the TorusKit smoothly reverse the animation in any state. You can check it in the sequenced example where you can hover out any time and the animation smoothly switch the direction and play in reverse direction.
// Sequenced
Scroll
Scroll-linked (and also mouse-linked) animation are fully supported in the TorusKit.
Even the offset animations with multiple steps are possible. Just use the standard percentage-based syntax to specify the offset of each step. Coordinates-based triggers such as scroll
and pointer
uses a viewport as their reference. For example, setting the offset to 50%:[tx(2rem)]
, means the element moves 2rem
, until it reaches the 50%
of the viewport.
// Sequenced
Combination
You can combine any supported triggers as you need on one element! Each trigger has its own calculation layer, so they do not interfere with the others. Read more about the trigger Combinations.