Introduction to animations

Overview

Making the CSS animations as simple as possible is one of the main purpose of TorusKit. By using it’s simple syntax without any prior knowledge of animating, you can achieve results that will otherwise needs a lot of JavaScript or CSS code. Some of them are even not possible with pure CSS.

Basic syntax

All TorusKit’s stuff begin by adding data-tor attribute to the HTML element. With that, the script will know that this element must be processed by the TorusKit. As mentioned in the trigger section of Quick start guide, to perform the animation you must define the trigger. There are various ones which you can check in the documentation Triggers section.

Right now, we are gonna use the animate trigger that will automatically start the animation on page load. We have also added the duration: 1s and iterations: infinite options to the scale property to make animation runs forever.

Examples

Here is an example of using various triggers to animate different CSS properties. There are a lot more triggers that you can use to animate elements. Learn more in the separate Triggers section.

Timeline types

TorusKit provides three different types of timelines: Discrete, Sequenced and Offset-based. This section will quickly go trough them to make a higher overview of each one. To learn more details, check the desired documentation page of each timeline type.

Discrete

This is the basic timeline type, which we were using so far. It has only two values - the initial value (optional) and the final value. Read more about the Discrete timeline.

Sequenced

Advanced timeline that uses sequence of steps to create a CSS animation. When one step finishes, the next one starts. Read more about the Sequenced timeline

Offset

Similar to CSS keyframes, you can define the timeline step offset using percents. Use {percents}: syntax for every step in the timeline definition. Make sure to start with the 0%: step. Read more in Offset-based timeline