Animation chaining

Chain the multiple animation in sequence

Overview

Animation chaining in TorusKit allows you to connect multiple animations sequentially. By using references, you can trigger animations in a precise order, ensuring that each animation starts only after the previous one completes. This approach simplifies the creation of complex, orchestrated animations without needing extra JavaScript logic.

With animation chaining, you can:

  • Create seamless transitions between animations.
  • Link animations across multiple elements.
  • Control animation flow using hooks like on|start, on|finish or custom offset with on|{percents}.

Syntax

  • animate: Specifies the animation property to apply.
  • property(value): Defines the animation effect (e.g., translateX, scale, rotate).
  • on|hook: The animation state at which to trigger the other animation (on|start, on|finish, on|{percents}).
  • options: Optional animation parameters such as duration, iterations, or direction.
  • reference: The name of the referenced animation to trigger.

Note: Make sure to use unique names for references to prevent from triggering multiple animations

Property-level

Trigger a sequence of animations across multiple elements on a property level.

Note: Property-level references can be used only when animating a stand-alone property as shown below. If the property is the part of the timeline, references must be defined in the step or timeline options.



  • The first button animates horizontally (translateX).
  • When it finishes, it triggers the second button to scale up.
  • Once scaling completes, the third button rotates by 45 degrees.

Step-level

Trigger animation references based on the state of a step, rather than an individual property.



  • The first step animates the translateX without triggering any reference.
  • The second one uses the on|finish hook to trigger the @grow-02 reference.
  • Once scaling completes, the third button rotates by 45 degrees.

Timeline-level

Orchestrate animation references based on the state of the entire timeline, rather than individual steps or properties.



  • The @grow-03 is trigger after the timeline reaches the 30%
  • Then the @rotate-03 is immediately triggered, caused by on|start hook of the previously triggered @grow-03 reference