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 withon|{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 asduration
,iterations
, ordirection
.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.
- 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 the30%
- Then the
@rotate-03
is immediately triggered, caused byon|start
hook of the previously triggered@grow-03
reference