These rive functions are available as a part of fastn and can be used in any fastn document. Checkout 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 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 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 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 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 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 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 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