Use Rive to build an Interactive Toggle

Design, animate, and ship a Rive toggle switch in a live web page.

Introduction

30 Second Summary

Every polished app has small interactive moments that make it feel alive. Think of a dark mode toggle that slides smoothly or a button that bounces on hover.

In this project, you will design, animate, and wire up an interactive toggle switch in TOGGLE_COLOR from scratch using the Rive editor. By the end, your toggle will respond to clicks with smooth state transitions, all running inside the browser-based editor.

What You'll Build

A fully interactive toggle switch built entirely in the Rive editor, complete with design, animation, and a State Machine that responds to clicks with smooth transitions.

By the end of this project, you'll have:

A toggle switch animation with two states designed and animated in the Rive editor.
A State Machine that drives interactive click-to-toggle behaviour with smooth transitions.
Hands-on experience with keyframes, interpolation, and Listeners inside the Rive editor.
Secret Mission: Add a hover effect that scales the toggle knob for a polished, production-quality interaction.

Before We Start

Before We Start...

Set Up Your Rive Account and Local Environment

Set Up Your Rive Account

Rive is a web-based animation tool where you design, animate, and add interactivity to graphics. The entire editor runs in your browser, so there is nothing to install.

In this step, you'll create your free Rive account and open a new file in the editor.

In this step, get ready to:

Create a free Rive account.
Open a new file in the Rive editor.

Create a Rive account and open the editor

The Rive editor is a web app. You sign up, create a file, and start designing. No downloads needed.

Open your browser and go to rive.app.
Click Sign Up and create a free account using your email or a social login.
Once signed in, you will land in your Workspace. Click Personal Files in the left sidebar.
Click the + button to create a new file.

The Rive editor opens in your browser with a blank Stage and a default artboard. This is where you'll design and animate your toggle switch.

What is a Workspace?

A Workspace is how Rive organizes your files. Every account gets a personal Workspace with unlimited private files. You can also create collaborative Projects inside your Workspace, but for this project you only need Personal Files.

🙋‍♀️ Don't see the editor?

Make sure you clicked a file (or the + button to create one) inside Personal Files. The editor only opens when you open or create a file.

If the page is stuck loading, try refreshing your browser or clearing your cache. Help me troubleshoot the Rive editor not loading.

Your Rive account is ready and the editor is open. Next, you'll start designing your toggle switch from scratch.

Design the Toggle Switch in Design Mode

Your Rive account is set up and your local project folder is ready. Now it's time to design the actual toggle switch.

Every Rive animation starts with shapes on an artboard. In this step, you'll create the two visual building blocks of your toggle: a pill-shaped track and a circular knob.

In this step, get ready to:

Set up and resize the artboard.
Draw the track background shape.
Draw the knob circle.

Set up the artboard

An artboard defines the boundaries of your animation. The Rive editor opens in Design Mode by default, which is exactly where you need to be.

Click on the default artboard in the center of the Stage (the large central canvas area).
Look at the Inspector panel on the right side of the editor.
Find the artboard name at the top of the Inspector and rename it to Toggle.
Set the Width field to 400.
Set the Height field to 200.

Your artboard should now appear as a wide rectangle on the Stage.

What is an artboard?

An artboard is the root container for everything in your Rive scene. It defines the width, height, and background of your animation.

When you export your animation later, the artboard dimensions determine the size of the final output. The 400x200 size gives a wide, compact shape that fits a horizontal toggle nicely.

Draw the track (background pill shape)

The track is the rounded background that the knob slides along. You'll draw it as a rectangle and then crank up the corner radius to turn it into a pill shape.

Select the Rectangle tool from the Toolbar at the top of the editor (keyboard shortcut: R).
Click and drag on the artboard to draw a rectangle.
In the Inspector on the right, set the Width to 300.
Set the Height to 80.
Set the Corner Radius to 40 (half the height) to create a perfect pill shape.
In the Fill section of the Inspector, click the color swatch and enter #3A3A4A for a muted dark gray.
Center the shape on the artboard by selecting it and using the Align tools at the top of the Inspector.
Click the horizontal center align button and the vertical center align button.
In the Hierarchy panel on the left, double-click the shape's name and rename it to Track.

You should see a dark gray pill shape centered on your artboard.

Why set the corner radius to 40?

Setting the corner radius to exactly half the shape's height turns a rectangle into a perfect pill (also called a stadium shape). Since the height is 80, a radius of 40 rounds each corner into a perfect semicircle.

🙋‍♀️ Shape not looking like a pill?

Make sure you're editing the corner radius on the path layer, not the shape layer. Press Enter with the shape selected to drill down to the path layer where the corner radius property lives.

Help me fix my pill shape

Draw the knob (circle)

The knob is the white circle that the user clicks to toggle between states. It needs to sit on top of the track so it's visible.

Select the Ellipse tool from the Toolbar (keyboard shortcut: O).
Click and drag on the artboard to draw a circle.
In the Inspector, set the Width to 64.
Set the Height to 64.
In the Fill section, click the color swatch and enter #FFFFFF (white).
Drag the knob to the left side of the track, centered vertically. The editor's snapping guides will help you align it.
In the Hierarchy panel, double-click the shape's name and rename it to Knob.

What is the Hierarchy?

The Hierarchy is the tree view on the left side of the editor. It shows every object on your artboard and controls their draw order. Objects at the top of the list render in front of objects lower in the list.

The Knob must render on top of the Track. Check the Hierarchy panel to confirm the layer order.

In the Hierarchy, confirm that Knob appears above Track in the list.
If Knob is below Track, drag Knob upward in the Hierarchy until it sits above Track.

You should see a white circle sitting on the left side of the dark pill shape. The knob overlaps the track cleanly because it's higher in the draw order.

Knob hidden behind the track?

This happens when Knob is lower than Track in the Hierarchy. Objects at the bottom of the list render behind objects above them. Drag Knob above Track to fix it.

Help me fix my Knob draw order

Your toggle switch design is complete. Next up, you'll bring it to life by creating animations that slide the knob and change the track color.

Animate the Toggle States

Your toggle switch looks the part, but it doesn't move yet. A static shape on a canvas is just a drawing.

In this step, you'll switch to Animate Mode and create two timeline animations. One slides the knob to the right and turns the track green. The other reverses everything back to its starting position.

In this step, get ready to:

Create a "Toggle On" timeline animation with keyframes and easing.
Create a "Toggle Off" timeline animation that reverses the motion.
Preview both animations to confirm smooth transitions.

Create the Toggle On animation

Rive has two distinct modes. Design Mode is for building shapes. Animate Mode is for bringing those shapes to life with timelines, keyframes, and easing curves.

Press Tab on your keyboard to switch from Design Mode to Animate Mode.

The editor changes. A Timeline panel appears at the bottom of the screen, and an Animations List appears on the left side of the Timeline.

What is Animate Mode?

Animate Mode transforms the editor to show everything you need for creating animations. The Inspector now displays a diamond icon next to every property that can be animated.

Any changes you make to an object while a timeline is open will automatically create a keyframe at the current playhead position. This is called auto-keying.

Every artboard starts with a default timeline. You'll rename it and configure it for the "on" animation.

In the Animations List on the left side of the Timeline, you should see a default timeline. Double-click its name to rename it.
Type Toggle On and press Enter.
Click the time indicator at the top of the Timeline to open the Timeline Options.
Find the Duration field and change it to 30f. This gives the toggle a snappy half-second slide.

What does 30f mean?

The f stands for frames. Rive timelines run at 60 frames per second by default, so 30f = 30 frames ÷ 60fps = 0.5 seconds.

You can think of it like a flipbook: more frames means a longer, slower animation. Here are some common values you'll see on the timeline ruler:

10f = ~0.17 seconds (very fast).
20f = ~0.33 seconds (quick).
30f = 0.5 seconds (snappy, our choice).
60f = 1 second (slow, dramatic).

Now you'll set the starting keyframes at frame 0. Keyframes tell Rive the exact value of a property at a specific point in time.

Make sure the playhead is at the very beginning of the timeline (frame 0).
Click on the Knob shape on the Stage to select it.
In the Inspector on the right, find the X position property. Click the diamond icon next to it to set a keyframe at the current value.
Click on the Track shape on the Stage to select it.
In the Inspector, find the Fill color. Click the diamond icon next to it to key the current gray color (#3A3A4A) at frame 0.

What are keyframes?

A keyframe records the value of a property at a specific moment in time. When you set two keyframes with different values, Rive automatically calculates all the in-between values to create smooth motion.

The diamond icon in the Inspector turns blue when a keyframe is set. A grey diamond means no key exists at the current playhead position.

Next, you'll set the end-state keyframes at frame 30. This is where the toggle lands after the animation plays.

Drag the playhead to the end of the timeline (frame 30).
Click on the Knob shape on the Stage.
Drag the Knob to the right side of the Track. Rive auto-keys the new X position at the playhead.
Click on the Track shape on the Stage.
In the Inspector, click the Fill color box to open the Color Picker. Change the fill color to #4ADE80 (a vibrant green). Rive auto-keys this new color at frame 30.

Before you polish the motion, play it back to see what you've got so far.

Press Space to play the animation.

The Knob slides from left to right and the Track changes from gray to green. It works, but notice how the motion feels robotic. The Knob moves at a perfectly constant speed from start to finish. Keep this feeling in mind.

That constant-speed motion is called linear interpolation. It gets the job done, but real-world objects accelerate and decelerate. Cubic interpolation adds a gentle ease-in and ease-out curve that makes the toggle feel physical.

Select all the keyframes on the timeline. You can drag a selection box across all keys, or click one key and then hold Shift while clicking the others.
Look at the Interpolation Panel that appears to the right of the Timeline.
Click the Cubic icon (the curved line icon) above the interpolation graph.

What is interpolation?

Interpolation is how Rive calculates values between two keyframes. Linear interpolation changes at a constant rate. Cubic interpolation uses a curve, so the animation starts slowly, speeds up in the middle, and slows down at the end.

Real-world objects accelerate and decelerate. Cubic easing makes your toggle feel physical instead of robotic.

Press Space to play the animation again. Compare it to before. The Knob should now ease in and ease out gently instead of moving at a constant speed.

Knob not moving?

Make sure you have the "Toggle On" timeline selected in the Animations List. If a State Machine is selected instead, you won't see the timeline playback controls.

Check that you have keyframes at both the start (frame 0) and end (frame 30) of the timeline. If only one keyframe exists, there's nothing to interpolate between.

Help me troubleshoot my Toggle On animation in Rive. The knob is not moving when I press play.

Create the Toggle Off animation

The "Toggle Off" animation reverses the motion. The knob slides back to the left and the track fades back to gray.

In the Animations List on the left side of the Timeline, click the + button.
Select Timeline from the menu to create a new timeline animation.
Double-click the new timeline's name and rename it to Toggle Off.
Click the time indicator and set the Duration to 30f, matching the Toggle On animation.

Now set the starting keyframes. This time, the animation begins in the "on" position.

Make sure the playhead is at frame 0.
Select the Knob on the Stage. Drag it to the right side of the Track (the "on" position).
In the Inspector, click the diamond icon next to the X position to key it.
Select the Track on the Stage. Set the fill color to #4ADE80 (green) and click the diamond icon next to the fill to key it.

Set the end-state keyframes to bring everything back to the "off" position.

Drag the playhead to the end of the timeline (frame 30).
Select the Knob and drag it back to the left side of the Track.
Select the Track and change the fill color back to #3A3A4A (gray).
Select all keyframes on the timeline.
In the Interpolation Panel to the right of the Timeline, click the Cubic icon to set cubic easing.

Colors not changing?

Make sure you are selecting the Track shape (not the Knob) before changing the fill color. Check the Hierarchy panel to confirm which object is selected.

If the fill color isn't keying, confirm you clicked the diamond icon next to the fill property in the Inspector. A blue diamond means the key was set successfully.

Help me troubleshoot my Toggle Off fill color keyframes in Rive.

Preview your animations

In the Animations List, click Toggle On to select it.
Press Space to play the animation. You should see the Knob slide right and the Track turn green.
Click Toggle Off in the Animations List to switch to it.
Press Space again. You should see the Knob slide back to the left and the Track return to gray.

Both animations should feel smooth. The motion should ease in and ease out gently thanks to the cubic interpolation. If anything looks jerky, go back and confirm that all keyframes have cubic easing applied.

Fine-tune your easing

You can drag the handles on the cubic curve in the Interpolation Panel to customize the easing. Pulling a handle further creates a more dramatic acceleration or deceleration.

Your two animations are ready. Next up, you'll connect them with a State Machine so clicking the toggle actually fires the right animation at the right time.

Build the State Machine

Your two toggle animations play smooth 30-frame transitions with color and motion. Each one works perfectly on its own timeline.

But they only play in the Timeline panel right now. There's no way for a user to trigger them. In this step, you'll build a State Machine that wires your animations to a click interaction so the toggle actually responds to the user.

In this step, get ready to:

Create a State Machine with an "Off" and "On" state.
Create a View Model with a Boolean property and wire the transitions.
Add a Listener that flips the Boolean when the toggle is clicked.

Create a State Machine and add your states

A State Machine is a graph that decides which animation plays based on rules and user input. Instead of playing animations on a fixed timeline, it lets your toggle react to clicks in real time.

In the Animations List on the left side of the Timeline panel, click the + button.
Select State Machine from the dropdown.
Double-click the new State Machine's name and rename it to Toggle.

The Timeline panel changes into a graph view. You'll see two default nodes: Entry (where the State Machine begins) and Exit (where it can stop). The graph is where you'll add your animation states and connect them.

Drag the Toggle Off animation from the Animations List on the left and drop it into the graph area.
Drag the Toggle On animation into the graph area as well.

You should now see four nodes in the graph: Entry, Exit, Toggle Off, and Toggle On. Next, tell the State Machine which state to start in.

Click on the Entry node in the graph.
Click on the Toggle Off state. An arrow appears connecting Entry to Toggle Off.

What does connecting Entry mean?

The Entry node is the starting point. By connecting it to Toggle Off, you're telling the State Machine: "When this animation first loads, start in the off position." Without this connection, the State Machine wouldn't know which state to begin in.

Your graph should now show an arrow from Entry pointing to Toggle Off, with Toggle On sitting nearby (not connected to anything yet).

Don't see the graph?

Make sure you selected State Machine from the + dropdown, not another timeline. The graph only appears for State Machines. If you accidentally created a timeline, right-click it in the Animations List and delete it, then try again.

If the graph panel looks cramped, drag the divider between the Stage and the graph area upward to give it more room.

Help me set up my State Machine in the Rive editor

Create a View Model and wire the transitions

Your two states exist in the graph, but nothing connects them yet. You need transitions (the arrows that define which state changes are possible) and a View Model property to control when those transitions fire. The View Model holds a Boolean that tracks whether the toggle is on or off.

Open the Data panel (click the database icon in the left sidebar).
Click + to create a new View Model.
Name it ToggleVM.
Inside ToggleVM, click + to add a property.
Select Boolean as the property type.
Name the property isOn. Leave its default value as false (the toggle starts in the off position).
Close the Data panel and make sure the Toggle State Machine is selected again in the Animations List.

Now draw the transition arrows between your states.

Hover over the Toggle Off state node until you see a small circle (ellipse) appear on its edge.
Click and drag from that circle to the Toggle On state. Release to create a transition arrow.
Hover over the Toggle On state node until you see the circle appear.
Click and drag from that circle to the Toggle Off state. Release to create the reverse transition.

Now bind each transition to the isOn property so the State Machine knows when to fire them.

Click the transition arrow from Toggle Off to Toggle On to select it.
In the Inspector panel on the right, find the Conditions section.
Click + to add a condition. Select the isOn property and set it to true.
Click the transition arrow from Toggle On to Toggle Off to select it.
Click + next to Conditions. Select isOn and set it to false.

What is Data Binding?

Data Binding connects your View Model properties to the State Machine. Instead of using legacy Inputs or triggers, you bind a View Model property directly to transition conditions. When the property changes, the matching transition fires automatically.

This is the recommended approach for all new Rive projects. It keeps your logic centralized in the View Model and makes runtime integration straightforward.

You should now see arrows pointing in both directions between Toggle Off and Toggle On.

Why do you need transitions in both directions?

A transition is a one-way path. The Off-to-On arrow lets the toggle turn on, but without a separate On-to-Off arrow, it could never turn back. Two arrows give the toggle the ability to switch back and forth freely.

🙋‍♀️ Only seeing one arrow?

Each direction needs its own separate transition. Make sure you created one arrow from Toggle Off to Toggle On AND a separate arrow from Toggle On back to Toggle Off. Delete any incorrect arrows by selecting them and pressing Delete or Backspace.

Help me create transitions in my Rive State Machine

Add a Listener to toggle on click

The transitions and View Model property are in place, but nothing changes isOn yet. A Listener watches for user input on the canvas and toggles the Boolean in response. When the Boolean flips, the matching transition fires automatically.

Make sure the Toggle State Machine is selected in the Animations List on the left.
Find the Listeners tab in the panel below the graph.
Click the + icon to create a new Listener.

The new Listener appears in the panel at the bottom of the State Machine graph. Configure its three parts: Target, Listener Condition, and Listener Action.

Under Target, click the target icon and select the Knob shape from the hierarchy. This tells the Listener to watch for interactions on the Knob.
Under Listener Condition (the dropdown below Target), select Pointer Down. This means the Listener fires when the user presses down on the target.
Under Listener Action, the action type is already set to View Model Change (the default). Use the View Model dropdown to select the isOn Boolean property from ToggleVM.
To the right of the property, switch from Value to Property. Then select isOn again so the property is set equal to itself.
Click the converter icon (to the right of the property selector) and add a Not converter. This inverts the value each time the Listener fires, flipping isOn between true and false.

How the pieces connect

Here's the chain: User presses the Knob → the Listener detects "Pointer Down" → its action sets isOn equal to itself with a Not converter (flipping true to false or vice versa) → the State Machine sees the Boolean change → the matching transition fires → the correct animation plays.

The View Model is the central source of truth. The Listener changes it, and the transitions react to it. This pattern scales to any interactive Rive animation.

Time to test the full interaction.

Click the Play button at the top of the State Machine graph to enter preview mode.
Click on the toggle knob in the preview.

The knob should slide from left to right and the track should turn green. Click again and the toggle reverses back to its off state.

Toggle not responding to clicks?

Check the Listener Target. It should be set to Knob. If you're having trouble clicking a small target, try changing it to the artboard instead (the whole canvas becomes clickable).
Check the Listener Condition. It should say Pointer Down, not Pointer Enter or another event.
Check the Listener Action. It should reference the isOn property from ToggleVM, set to Property (not Value), with a Not converter applied. If no property appears in the dropdown, make sure you created the View Model and assigned it to the artboard.
Verify that both transition arrows exist and that each one has a condition bound to the isOn property (Off→On fires when isOn = true, On→Off fires when isOn = false).

Help me debug my Rive State Machine with View Model and Listener

Your toggle now responds to clicks directly inside the Rive editor. You've built a complete interactive animation from scratch using Design Mode, Animate Mode, and a State Machine.

Secret mission

Add a Hover Effect

Your toggle works, but it doesn't feel alive yet. Take it from functional to polished by adding a hover interaction that scales the knob when your cursor enters. You'll use a separate State Machine layer so the hover and toggle animations run independently.

Before you go

🗑 Before you go

Decide whether to keep your resources or delete them. This project runs entirely in the free Rive editor, so there are no ongoing costs.

Resources you used:

Rive account (free plan).
Rive file in the Rive editor (your toggle switch project).

Keep everything running

No action needed. Choose this if you plan to keep experimenting with Rive and want your project files ready to go.

Your Rive file stays in your Workspace. You can open and edit it anytime.
The free plan gives you full access to the editor with no time limit.

Pause - I'll come back to this later

No action needed. Your Rive file is saved in the cloud automatically.

Your Rive file persists in your Workspace indefinitely. Sign back in anytime to pick up where you left off.

Delete - I don't want to use this again

Remove your project file from Rive.

Open your Rive Workspace and click Personal Files.
Right-click your toggle switch file and select Delete.
If you no longer need the account, look for the account deletion option in your profile settings.

Mission accomplished

🎉 Mission Accomplished

Nice work! You just built a fully interactive toggle switch inside the Rive editor. You designed, animated, and wired up a State Machine that responds to clicks with smooth transitions.

You've learned how to:

Design and animate a toggle switch from scratch using Rive's Design Mode and Animate Mode, with keyframes and cubic interpolation for smooth transitions.
Build a State Machine with bidirectional transitions and a click Listener to make the toggle interactive without writing any code.
Test and iterate on interactive animations entirely inside the Rive editor using the built-in Play mode.
Secret Mission: Added a hover effect on a separate State Machine layer for polished, production-quality interaction.

Ready to quiz yourself?