Lottie-animated component
Create stateful components with Lottie animations
This feature will give dynamism to your components and will enhance the quality of your app! Now you can easily set states by using dotLottie and Lottie animations instead of regular states.
👉 The tags
📍Where to add the tags: A rectangle layer
These are the tags you can use in the design file to implement the toggle component.
[component:stateful-lottie:<url>]
[component:input-stateful-lottie:<url>]
These tags support only URLs ending in .json
Available use cases:
[component:stateful-lottie:<url>]
Example:
[component:stateful-lottie:https://assets8.lottiefiles.com/packages/lf20_ei7frqcx.json]
In contrast to the stateful components created with variants, remote actions can't be bound to each of the component states. Therefore, features like favorites/like buttons aren't supported with Lottie animations at the moment.
Optional tag
Add a custom frame
Add a custom frame to the tag that defines where the active animation is.
[component:stateful-lottie:<url>:<custom-frame>]
[component:input-stateful-lottie:<url>:<custom-frame>]
It's the frame where the animation changes. Setting a custom frame, sets the active animation from 0 to <custom-frame>, and the default animation from <custom-frame> to end. If no frame is specified, the animation will go from 0 to end.
In this example:
The Lottie animation frame goes from 0 to 180. We will set a <custom-frame> of 90 as it's where we want the animation to stop.
[component:input-stateful-lottie:<url>:90]
The animation plays as follows: To enable, on tap, the animation plays from 0 to 90, To disable, on tap, the animation plays from 90 to end.
How to add the tag
Check our LottieFile guide to see how to add Lottie URLs.
💾 Example files
Duplicate the files below to see how to set it up!
Last updated
