Discrete animation timeline type

Overview

The discrete timeline type is based on the two values (states) - the initial (optional) and the finish value. When the trigger is executed, TorusKit will start the transition from the initial value (explicitly defined, or automatically computed) to the finish value. This is the most simple way to animate elements. In the examples on the previous pages, we were using just the discrete timeline.

Syntax

The initial value is a starting value and can be defined by using a Static styling. You don’t need to define it explicitly if you are going to animate just the finish value.

The finish value is the animation final value. It represent the final state that you are going to animate. This value is required.

Initial values (optional)

When you need the animation to start from some value, just define it using the Static styling. In other words - set the CSS property without any trigger. This will be used as an initial value for the animation.

The first example below sets the initial value of opacity to 0.4. When you hover the button, opacity will change to 0.8. And vice-versa, when you hover out, the opacity will revert to initial 0.4 value.

In the second example, we set the initial value of rotate to 10deg. This makes the animation to start rotating from 10deg (instead of the default 0deg).

Final values

In most cases you need to animate the element from its current state into the new - final state. So you just define the CSS property final value together with the a desired trigger.

Here we have examples that use tha same values as the example above, except that this time we are going to use only the final values.

Clusters

Sometimes you need to animate multiple properties with one trigger. So instead of defining one trigger for many properties, you can use a Clusters. Just wrap multiple properties together into the [] brackets.

Shorthands

Shorthand properties are also supported in the clusters. This example takes the code above and shows how you can reduce the amount of typing using shorthand properties.

Scroll-linked

A discrete timeline can also be applied to a scroll-linked trigger. By default, the animation starts when the element enters the viewport from the bottom (0% offset) and continues until it reaches the top (100% offset). You can customize this behavior by adjusting the start and end offsets. Learn more about the trigger options on Scroll trigger page.

Shorthand

start and end offsets can be omitted to utilize the shorthand syntax.

Mouse/Pointer-linked

The same behavior applies to the mouse/pointer-linked trigger as well, but with the option to specify the axis. The default is set to both, but you can limit trigger to apply the animation only to x or y axis. The start and end offsets are the same as the on the above Scroll-linked trigger. Learn more about the trigger options on Pointer / Mouse trigger page.

Shorthand

axis, start and end offsets can be omitted to utilize the shorthand syntax.

Options override

Clusters utilize option override, which allows you to set a common timeline option that is passed into each property within the cluster. The previous examples demonstrate this principle, where parent options are shared with their children. However, sometimes you may need specific options that differ from the parent’s. In these cases, simply define the options at the property level, and TorusKit will automatically prioritize and use them over the parent options.

This example demonstrates that the duration specified in the parent option is 1s. However, we want the rotate property to last four seconds. To achieve this, we’ve added a 4s duration to the property option. As a result, the infinite iterations and alternate direction will be inherited by all properties, while the 1s duration will apply only to opacity and scale. Meanwhile, the rotate property will have its own 4s duration.