References

Trigger external animation once the current one starts of finishes

Overview

The References utility allows animations or transformations to trigger external animations at specific moments during their lifecycle. Using references, you can coordinate multiple animations to start, synchronize, or chain together based on hooks like @start or @finish. This is particularly useful for complex, interconnected animations without relying on additional JavaScript.

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

Syntax

  • trigger: The interaction that triggers the animation (e.g., hover, click).
  • animation: The action applied to the current element (e.g., scale, translateX).
  • @start: Fires the reference animation when the current animation starts.
  • @finish: Fires the reference animation when the current animation finishes.
  • @percentage: Fires the reference animation when the current animation reaches defined percentage offset (e.g. 70%).

Examples

State hooks

This method shows how external animations can be triggered based on the state of a primary animation using @start and @finish hooks.

@start

This example triggers an external animation (@fade) at the start of the hover animation.

Hover

@fade

Explanation: When the hover:scale(1.5) animation begins, the @start: @fade reference activates. This causes the @fade:opacity(0.2) to animate its opacity to 0.2.

@finish

This example triggers an external animation (@move) at the end of the hover animation.

Hover

@move

Explanation: When the hover:scale(1.5) animation completes, the @finish: @move reference activates. This causes the @move:translateX(3rem) element to animate with a horizontal translation of 3rem.

Percentage hooks

You can use percentage-based hooks to precisely control the timing of reference triggering. Each @{number}% represents the progress offset of the current animation, allowing you to coordinate external animations at specific points in the timeline.

Hover


@move-0

@move-33

@move-66

Triggering directly

This method demonstrates triggering an external animation (@grow) directly using a defined trigger.

Hover

@grow