# State Machines Tutorial: How Number Inputs Work with Star Rating Example
*By LottieFiles · September 25, 2025*
Elevate your user experiences with a star rating system.
---
[State Machines](https://lottiefiles.com/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?**
[Click on me](https://lottie.host/embed/24e5574c-4e2d-43c2-9721-a85814998a6c/4G6wuFBfsX.lottie?stateMachineId=StateMachine1)
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**](http://creator.lottiefiles.com/)
Let’s walk through how to set up a star rating animation using numeric inputs in Lottie Creator.
Step 1: creating a numeric trigger
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.)
Step 2: Create a global state node
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.
Step 3: Drop all the segments in
3) Drop all the different segments in. When we do this it creates `PlaybackState`s for each segment. A `PlaybackState` can define how the animation plays when it is the current `State`.
Step 4: Connect Global state to each PlaybackState
4) Connect the `Global` state to each `PlaybackState`.
Step 5: Define the Guards on each Transition
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.
Step 6: Define listeners
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.
Remix Star Rating Animation on Lottie Creator
## 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:
```bash
pnpm add @lottiefiles/dotlottie-react
```
**`App.tsx`**
```tsx
import React from 'react';
import { DotLottieReact } from '@lottiefiles/dotlottie-react';
const App = () => {
return (
);
};
```
As simple as that!
Or if a user prefers to choose when to load the state machine:
```tsx
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 (
);
};
```
Since we declared listeners using Creator, the player has automatically set up the PointerDown (click) listeners for us.
### iOS
```swift
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:
```swift
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
```tsx
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(""), // 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:
```tsx
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(""), // 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](https://lottiefiles.com/blog/working-with-lottie-animations/state-machines-are-finally-in-lottie-creator).
Want to start? Remix our star rating animation [here](https://creator.lottiefiles.com/?remixId=ae2168cf-e432-4884-b3d1-4ff25068b278&utm_source=&utm_medium=creator).
Explore State Machines
---
## Related Articles
- [Lottie/dotLottie vs. GIF: Choosing the Right Animation for You](/blog/working-with-lottie-animations/lottie-vs-gif)
- [Introducing Motion Copilot 2.0 in Lottie Creator](/blog/working-with-lottie-animations/introducing-motion-copilot-on-lottie-creator)
- [Lottie Creator 2.0: A Powerful Web-Based Lottie Animation Tool](/blog/working-with-lottie-animations/lottie-creator-a-powerful-web-based-lottie-animation-tool)
- [Introducing Motion System: One Workflow for Animation That Actually Ships](/blog/working-with-lottie-animations/introducing-motion-system-one-workflow-for-animation-that-actually-ships)