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:

  1. automatically executed: animate
  2. user interaction-driven: hover
  3. 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.

// Discrete

// 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.

// Discrete

// 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.

// Discrete

// 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.