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 sequenced animations with multiple steps are possible. You just need to specify the start and the end offset for each step. We have two steps in this example, so we added two start and two end offsets inside the brackets []. Maybe it looks difficult to understand, so lets dive deeper into the way of how it works.

The first step starts at 0% of the screen and ends at 50%. Then, when the first step ends, the second one starts at 50% (because the first one ended at 50% also) and ends at 100%. So the definition for start offsets is start: [0% (1st step), 50% (2nd step)] and for the end offsets is end: [50% (1st step), 100% (2nd step)].

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