These [rive](/rive/) functions are available as a part of fastn and can be used in any fastn document. Checkout [built-in functions](/built-in-functions/) to know more about other functions available in fastn.

Functions for Rive Timeline

These functions are applied to rive timeline.

`ftd.toggle-play-rive(rive: string, input: string)`

Return type: `void` It plays an animation, if the animation is not playing, or else pauses it. It takes `rive` which is the [`id`](rive/#id) provided while declaring a rive component. It also takes `input` which is the timeline name.

Sample code using `ftd.toggle-play-rive(...)`

Input

-- ftd.rive:
id: vehicle
src: https://cdn.rive.app/animations/vehicles.riv
autoplay: false
artboard: Jeep
width.fixed.px: 600

-- ftd.text: Idle/Run
$on-click$: $ftd.toggle-play-rive(rive = vehicle, input = idle)
align-self: center

Lang:

ftd

Output

Idle/Run

`ftd.play-rive(rive: string, input: string)`

Return type: `void` It plays an animation. It takes `rive` which is the [`id`](rive/#id) provided while declaring a rive component. It also takes `input` which is the timeline name.

`ftd.pause-rive(rive: string, input: string)`

Return type: `void` It pauses an animation. It takes `rive` which is the [`id`](rive/#id) provided while declaring a rive component. It also takes `input` which is the timeline name.

Sample code using `ftd.play-rive(...)` and `ftd.pause-rive(...)`

Input

-- ftd.rive:
id: bell
src: $fastn-assets.files.assets.bell-icon.riv
autoplay: false
width.fixed.px: 200
$on-mouse-enter$: $ftd.play-rive(rive = bell, input = Hover)
$on-mouse-leave$: $ftd.pause-rive(rive = bell, input = Hover)

Lang:

ftd

Output

Functions for Rive State Machine

These functions are applied to rive state machine.

`ftd.fire-rive(rive: string, input: string)`

Return type: `void` It fires `trigger` identify by `input`. It takes `rive` which is the [`id`](rive/#id) provided while declaring a rive component. It also takes `input` which is the trigger type input in state machine.

Sample code using `ftd.fire-rive(...)`

Input

-- ftd.rive:
id: van
src: https://cdn.rive.app/animations/vehicles.riv
width.fixed.px: 400
state-machine: bumpy
$on-click$: $ftd.fire-rive(rive = van, input = bump)

Lang:

ftd

Output

`ftd.set-rive-integer(rive: string, input: string, value: integer)`

Return type: `void` It take the number type input and sets the value It takes `rive` which is the [`id`](rive/#id) provided while declaring a rive component, `input` which is the number type and `value` which is set to the input.

Sample code using `ftd.set-rive-integer(...)`

Input

-- ftd.rive:
id: helix-loader
src: $fastn-assets.files.assets.helix-loader.riv
width.fixed.px: 400
state-machine: State Machine
$on-click$: $ftd.set-rive-integer(rive = helix-loader, input = Load Percentage, value = 50)

Lang:

ftd

Output

`ftd.toggle-rive-boolean(rive: string, input: string)`

Return type: `void` It take the number type input and sets the value It takes `rive` which is the [`id`](rive/#id) provided while declaring a rive component and `input` which is the boolean type.

Sample code using `ftd.toggle-rive-boolean(...)`

Input

-- ftd.rive:
id: toggle
src: $fastn-assets.files.assets.toggleufbot.riv
state-machine: StateMachine
width.fixed.px: 400

-- ftd.text: Click me
$on-click$: $ftd.toggle-rive-boolean(rive = toggle, input = Toggle)

Lang:

ftd

Output

Click me

`ftd.set-rive-boolean(rive: string, input: string, value: boolean)`

Return type: `void` It take the number type input and sets the value It takes `rive` which is the [`id`](rive/#id) provided while declaring a rive component, `input` which is the boolean type and `value` which is set to the input.

Sample code using `ftd.set-rive-boolean(...)`

Input

-- ftd.rive:
id: mousetoggle
src: $fastn-assets.files.assets.toggleufbot.riv
state-machine: StateMachine
width.fixed.px: 400
$on-mouse-enter$: $ftd.set-rive-boolean(rive = mousetoggle, input = Toggle, value = true)
$on-mouse-leave$: $ftd.set-rive-boolean(rive = mousetoggle, input = Toggle, value = false)

Lang:

ftd

Output

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.