State Machines let designers create interactive animations that react to user inputs, data, or triggers without coding. They visually define transitions between states like hover effects, clicks, or loading indicators using node-based animations.
But beyond the stars, a rating system is also a great way to showcase how number inputs work in State Machines.
Why use a star rating animation?
Star rating animations provide an intuitive and engaging way for users to provide feedback. A star rating animation is a great example of how global state management works in State Machines. This scenario allows us to demonstrate key concepts such as:
1) Initial State: How the animation starts before any user interaction.
2) Global State: How the animation reacts to changes in state across different elements.
3) State Transitions: How the animation moves from one state to another based on user actions.
Understanding Number Inputs
At the heart of a star rating animation is a numeric input. This is simply a variable that stores a numeric value (e.g., 1, 2, 3) and drives how the animation responds.
1) rating = 1 → one star lights up
2) rating = 2 → two stars light up
3) rating = 3 → three stars light up
Instead of defining separate inputs for every possible state, one number input simplifies the logic. This makes the state machine easier to build, scale, and maintain.
Create star rating animations with State Machines in Lottie Creator
Let’s walk through how to set up a star rating animation using numeric inputs in Lottie Creator.
1) Creating a numeric trigger call “rating” → This stores a number relating to which star we want to display (rating = 1 is the first star, rating = 2 the second, etc.)
2) Create a global state node. This node is evaluated first whenever a trigger value changes, regardless of the current state. This allows us to reduce the number of connections between the different nodes.
3) Drop all the different segments in. When we do this it creates PlaybackStates for each segment. A PlaybackState can define how the animation plays when it is the current State.
4) Connect the Global state to each PlaybackState.
5) Define the Guards on each Transition. A Guard is a condition that has to be met to cause a Transition to its target state. Here, the condition is that the Rating trigger is equal to the equivalent star. This means for star 1, we need Rating to = 1, star 2 we need Rating to = 2, etc.
6) Then, we define listeners (user interactions) to detect when the user has clicked or tapped on a star. This will allow the player (regardless of platform - an important point) to automatically detect when we press on the animation and on which layer.
In the listeners we define:
1) Which Gesture to listen to - Here, we will use PointerDown, known as Clickfor Web or Tapfor Mobile
2) Which Layer to detect the gesture on (the different stars)
3) An Action - What happens we press on this layer. Here, we set the Rating (setNumeric) according to the star pressed. This means that when we press on Star 1, rating will be set to 1, etc.
And that’s it! A dynamic, interactive star rating system that reacts smoothly to user input.
You can also get started and remix our star rating animation.
Implementing star rating animation in code
Web
We have various players for the different web frameworks. This is how to implement within React probably the most popular:
First, install the @lottiefiles/dotlottie-react player package:
pnpm add @lottiefiles/dotlottie-react
App.tsx
import React from 'react';
import { DotLottieReact } from '@lottiefiles/dotlottie-react';
const App = () => {
return (
<DotLottieReact
src="path/to/animation.lottie"
stateMachineId="your state machine id"
/>
);
};
As simple as that!
Or if a user prefers to choose when to load the state machine:
import React from 'react';
import { DotLottieReact } from '@lottiefiles/dotlottie-react';
const App = () => {
const dotLottieRef = React.useRef();
const handleLoadStateMachine = React.useCallback(() => {
dotLottieRef.current.stateMachineLoad("your state machine id");
dotLottieRef.current.stateMachineStart();
}, []);
return (
<div>
<DotLottieReact
dotLottieRefCallback={(ref) => dotLottieRef.current = ref}
src="path/to/animation.lottie"
/>
<button onClick={handleLoadStateMachine}>Load State Machine</button>
</div>
);
};
Since we declared listeners using Creator, the player has automatically set up the PointerDown (click) listeners for us.
iOS
import DotLottie
struct MainView: View {
var body: some View {
DotLottieAnimation(fileName: filename,
config: AnimationConfig(stateMachineId: "your state machine id")).view()
}
}
Or if a user prefers to choose when to load the state machine:
import DotLottie
struct MainView: View {
let animation = DotLottieAnimation(fileName: filename,
config: AnimationConfig())
public func startStateMachine() {
animation.stateMachineLoad("State machine name")
animation.stateMachineStart()
}
public func stopStateMachine() {
animation.stopStateMachine()
}
var body: some View {
animation.view()
}
}
Android JetPack Compose
import com.lottiefiles.dotlottie.core.compose.ui.DotLottieAnimation
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.Modifier
import com.lottiefiles.dotlottie.core.util.DotLottieSource
import com.dotlottie.dlplayer.Mode
fun ExampleComposeComponent() {
DotLottieAnimation(
source = DotLottieSource.Url("<https://lottiefiles-mobile-templates.s3.amazonaws.com/ar-stickers/swag_sticker_piggy.lottie>"), // from url .lottie / .json
statemachineid = "your state machine id"
modifier = Modifier.background(Color.LightGray)
)
}
Or if a user prefers to choose when to load the state machine:
import com.lottiefiles.dotlottie.core.compose.ui.DotLottieAnimation
import com.lottiefiles.dotlottie.core.compose.runtime.DotLottieController
import com.lottiefiles.dotlottie.core.util.DotLottieSource
import com.dotlottie.dlplayer.Mode
fun ExampleComposeComponent() {
val dotLottieController = remember { DotLottieController() }
LaunchedEffect(UInt) {
dotLottieController.stateMachineLoad("your state machine id")
dotLottieController.stateMachineStart()
}
DotLottieAnimation(
source = DotLottieSource.Url("<https://lottiefiles-mobile-templates.s3.amazonaws.com/ar-stickers/swag_sticker_piggy.lottie>"), // url of .json or .lottie
controller = dotLottieController
)
}
Where to use star rating animations
Star rating animations can be useful in many applications, such as:
1) E-commerce platforms: Allow users to rate products with an interactive user interface.
2) Customer feedback forms: Enhance user experience by making feedback submission more engaging.
3) Gaming and achievements: Implement animations for rating achievements or progress tracking.
These interactive animations improve user engagement and make experiences more visually appealing.
Try it yourself
State Machines allow for seamless, interactive animations without the need for complex coding. By using a star rating system, we showcased how to leverage initial states, global states, and state transitions to create a dynamic animation.
You can also learn more about State Machines here.
Want to start? Remix our star rating animation here.
