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 on|start or @on|inish. This is particularly useful for complex, interconnected animations without relying on additional JavaScript.
Syntax
trigger: The interaction that triggers the animation (e.g., hover, click).animation: The action applied to the current element (e.g., scale, translateX).on|start: Fires the reference animation when the current animation starts.on|finish: Fires the reference animation when the current animation finishes.on|{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 on|start and on|finish hooks.
on|start
This example triggers an external animation (@fade) at the start of the hover animation.
Explanation: When the hover:scale(1.5) animation begins, the on|start: @fade reference activates. This causes the @fade: opacity(0.2) to animate its opacity to 0.2.
on|finish
This example triggers an external animation (@move) at the end of the hover animation.
Explanation: When the hover:scale(1.5) animation completes, the on|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 on|{number}% represents the progress offset of the current animation, allowing you to coordinate external animations at specific points in the timeline.
Triggering directly
This method demonstrates triggering an external animation (@grow) directly using a defined trigger.