Kernel Components

`ftd.rive`

Docs

Book 🚧

Learn

Why Use `fastn` for Your Next Frontend?

Container Root Attributes

`import`

Using export/exposing

Functions

Built-in Functions

Built-in Rive Functions

Built-in Variables

`ftd` Events

Rive Events

Use color scheme package

How to make page responsive

Using JS

JS in function

Web Component

Create `fastn` package

Same argument & attribute types

`ftd.rive` - Rive Animations

`ftd.rive` is a [kernel component](/ftd/kernel/) used to render [Rive animation](https://rive.app) in a `fastn` document.

Hello Rive!

Input

-- import: fastn.com/assets

-- ftd.rive:
id: panda
background.solid: #aaa
src: $assets.files.rive.panda.riv
width.fixed.px: 400

Lang:

ftd

Output

`ftd.rive` accepts all the [common attributes](/common-attributes/), and the ones listed below.

`id`

Type: **Required** `string` The unique `id` used to identify this rive object. This `id` is used in communication with the [Rive state machine](https://help.rive.app/editor/state-machine).

`src`

Type: **Required** `string` This is URL of riv file to load. It is recommended you store the riv file as part of your `fastn` package and use the auto generated `assets` module to refer to them.

`state-machine`

Type: `string list` It accepts the name or list of names of [Rive state machines](https://help.rive.app/editor/state-machine) to load.

`autoplay`

Type: `boolean` default: `true` If set `true`, the animation will automatically start playing when loaded.

`artboard`

Type: `optional string` It accepts the name of the [rive artboard](https://help.rive.app/editor/fundamentals/artboards) to use.

Rive functions

`fastn` language has various rive related [built-in functions](/built-in-rive-functions/). These functions help to interact with rive on various events.

Sample code

Input

-- ftd.rive:
id: fastn
src: $fastn-assets.files.assets.fastn.riv
width.fixed.px: 440
state-machine: Together
$on-mouse-enter$: $ftd.set-rive-boolean(rive = fastn, input = play, value = true)
$on-mouse-leave$: $ftd.set-rive-boolean(rive = fastn, input = play, value = false)

Lang:

ftd

Output

Rive Events

`fastn` language has various rive related [events](/rive-events/). These events can be attached to rive component. They fire the callback when any event occurs in rive component.

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.