Rive Events
These events are specific to rive component and can be added to rive
components only. These fire callback at various events in rive component. To
know more about other events in fastn, checkout events page.
on-rive-play[<timeline>]
The
on-rive-play[<timeline>] event gets fired when the animation starts
playing.on-rive-pause[<timeline>]
The
on-rive-pause[<timeline>] event gets fired when the animation pauses.Input
-- string $idle: Unknown Idle State
-- ftd.text: $idle
-- ftd.rive:
id: vehicle
src: https://cdn.rive.app/animations/vehicles.riv
autoplay: false
artboard: Jeep
$on-rive-play[idle]$: $ftd.set-string($a = $idle, v = Playing Idle)
$on-rive-pause[idle]$: $ftd.set-string($a = $idle, v = Pausing Idle)
-- ftd.text: Idle/Run
$on-click$: $ftd.toggle-play-rive(rive = vehicle, input = idle)
Lang:
ftd
Output
Unknown Idle State
Idle/Run
on-rive-state-change[<timeline>]
The
on-rive-state-change[<timeline>] event gets fired when a state change
occurs.Input
-- integer $bounce: 0
-- ftd.row:
spacing.fixed.px: 5
-- ftd.text: Number of times bounce occur:
-- ftd.integer: $bounce
-- end: ftd.row
-- ftd.rive:
id: van
src: https://cdn.rive.app/animations/vehicles.riv
state-machine: bumpy
$on-rive-state-change[bounce]$: $ftd.increment($a = $bounce)
-- ftd.text: Click to Bump
$on-click$: $ftd.fire-rive(rive = van, input = bump)
Lang:
ftd
Output
Number of times bounce occur:
0
Click to Bump
