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 @start or @finish.

Note: The syntax of Reference utility is in beta version and may be subject to change in the future

Syntax

  • animate: Specifies the animation property to apply.
  • property(value): Defines the animation effect (e.g., translateX, scale, rotate).
  • @hook: The animation state at which to trigger the next animation (@start or @finish).
  • 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.