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 takesrive
which is the id
provided while declaring a rive
component. It also takes input
which is the timeline name.ftd.toggle-play-rive(...)
-- 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
ftd.play-rive(rive: string, input: string)
Return type: void
It plays an animation.
It takesrive
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 takesrive
which is the id
provided while declaring a rive
component. It also takes input
which is the timeline name.ftd.play-rive(...)
and ftd.pause-rive(...)
-- 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)
ftd.fire-rive(rive: string, input: string)
Return type: void
It fires trigger
identify by input
.
rive
which is the id
provided while declaring a rive
component. It also takes input
which is the trigger type input in state
machine.ftd.fire-rive(...)
-- 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)
ftd.set-rive-integer(rive: string, input: string, value: integer)
Return type: void
It take the number type input and sets the value
It takesrive
which is the id
provided while declaring a rive
component, input
which is the number type and value
which is set to the
input.ftd.set-rive-integer(...)
-- 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)
ftd.toggle-rive-boolean(rive: string, input: string)
Return type: void
It take the number type input and sets the value
It takesrive
which is the id
provided while declaring a rive
component and input
which is the boolean type.ftd.toggle-rive-boolean(...)
-- 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)
ftd.set-rive-boolean(rive: string, input: string, value: boolean)
Return type: void
It take the number type input and sets the value
It takesrive
which is the id
provided while declaring a rive
component, input
which is the boolean type and value
which is set to the
input.ftd.set-rive-boolean(...)
-- 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)