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.

Example

Trigger a sequence of animations across multiple elements.



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