Animation combinations

Overview

TorusKit fully supports running multiple animations on one element together. Unlike the traditional CSS (or even some JS animation libraries), where you need do create nested HTML elements to be able to combine the animations, TorusKit allows you to combine as many triggers as you need. Even the same CSS properties can be animated at the same time. This can be done using the replace and additive Animation composition.

Time-based triggers

Time-based triggers such as hover, animate or active depends on passed time. These examples show the infinite pulsing animation that uses the animate trigger and runs even the other triggers are executed on the same element. When user do a hover on the element, it rotates 45deg, and if active trigger (click and hold) is executed, the element gets opacity of 0.5.

Discrete timeline

Multiple Discrete animation timeline types can be combine together.

Sequenced timeline

You can create a combination with the Sequenced timeline type as well.

Offset-based timeline

Offset-based animations are supported, too

Input-based triggers

Input-based triggers uses the input device (wheel, touch pad, mouse, etc) with the direct user’s interaction and are not based on time, but rather on the actual position of the trigger coordinates.

Scroll-linked

Feel free to combine time-based triggers with the scroll one as they runs independently on each other.

Mouse-linked

mouse trigger can be combined with other triggers as well.

Combination

You can even combine the scroll, mouse, hover or any triggers together on one element along with the other triggers.