These events are specific to [rive](/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](/events/) page.

`on-rive-play[]`

The `on-rive-play[]` event gets fired when the animation starts playing.

`on-rive-pause[]`

The `on-rive-pause[]` 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[]`

The `on-rive-state-change[]` 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:

Click to Bump

Support `fastn`!

Enjoying `fastn`? Please consider giving us a star ⭐️ on [GitHub](https://github.com/fastn-stack/fastn) to show your support!

[⭐️](https://github.com/fastn-stack/fastn)

Getting Help

Have a question or need help? Visit our [GitHub Q&A discussion](https://github.com/fastn-stack/fastn/discussions/categories/q-a) to get answers and subscribe to it to stay tuned. Join our [Discord](https://discord.gg/a7eBUeutWD) channel and share your thoughts, suggestion, question etc. Connect with our [community](/community/)!

[💻️](/community/)

Found an issue?

If you find some issue, please visit our [GitHub issues](https://github.com/fastn-stack/fastn/issues) to tell us about it.

Quick links:

- [Install `fastn`](install/) - [Create `fastn` package](create-fastn-package/) - [Expander Crash Course](expander/) - [Syntax Highlighting in Sublime Text](/sublime/)

Join us

We welcome you to join our [Discord](https://discord.gg/a7eBUeutWD) community today. We are trying to create the language for human beings and we do not believe it would be possible without your support. We would love to hear from you.