Built-in Rive Functions

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
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)
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)
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)
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)
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)
Output

Support fastn!

Enjoying fastn? Please consider giving us a star ⭐️ on GitHub to show your support!

Getting Help

Have a question or need help?

Visit our GitHub Q&A discussion to get answers and subscribe to it to stay tuned.

Join our Discord channel and share your thoughts, suggestion, question etc.

Connect with our community!

Found an issue?

If you find some issue, please visit our GitHub issues to tell us about it.

Join us

We welcome you to join our Discord 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.
Copyright Β© 2023 - FifthTry.com