Design a Task Celebration Microinteraction

Build a 5-state interactive celebration animation using Rive's State Machine.

Introduction

30 Second Summary

You know that satisfying little burst of confetti or flash of green when you check off a task? That tiny moment of delight is a microinteraction, and designers build them on purpose to make apps feel alive.

In this project, you will design a celebration microinteraction from scratch using Rive, a free browser-based animation tool. Your circle will breathe, react to hover, squish on click, then explode into a colorful celebration with a checkmark and sparkles.

What You'll Build

A fully interactive check-circle animation with 5 states of motion, built and tested entirely inside the Rive Editor.

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

A multi-element artboard with a circle, checkmark path, sparkle shapes, and a hit area that form the visual building blocks of your animation.
5 timeline animations covering the full emotional arc: idle breathing, hover invitation, click anticipation, celebration burst, and a proud completed glow.
A working State Machine with inputs, transitions, and listeners that make the whole thing respond to hover and click without writing any code.
Secret Mission: Add a confetti rain effect on a second State Machine layer that fires alongside the celebration burst.

Are there any prerequisites?

None. This project is completely browser-based and free. You just need a Rive account, which you will create in Step 1.

Before We Start

Before We Start...

Set Up Your Rive Account and Create the Artboard

Before you can animate anything, you need a canvas to work on. Rive is a browser-based animation editor, so there is nothing to install on your computer.

In this step, you will create a free Rive account, open the editor, and set up a fresh artboard sized perfectly for your celebration animation.

In this step, get ready to:

Create a free Rive account and open the Rive Editor.
Create a new file and set up your artboard at 400x400px.
Get oriented to the editor modes you will use throughout the project.

Sign up and open the editor

Rive runs entirely in your browser. You just need a free account to get started.

Open your browser and go to rive.app.
Click Sign Up and create a free account using your email or Google login.
Once signed in, navigate to editor.rive.app to open the Rive Editor.
You should land in your Personal Files workspace.

Why is Rive free for this project?

Rive's Free plan gives you unlimited personal files and full access to the editor, including Design mode, Animate mode, and State Machines.

The only limitation that matters is that exporting .riv files requires a paid plan ($9/month). Since this project stays entirely in-editor with preview and testing, the Free plan is all you need.

Can't find the editor?

Make sure you are going to editor.rive.app specifically, not just rive.app. The main site is a marketing page. The editor lives at its own URL.

If you see a blank screen, try a different browser or disable ad-blocking extensions that may interfere with the canvas.

Help me get the Rive Editor open in my browser

Set up your artboard

An artboard is your animation's canvas. It defines the boundaries and background for everything you will draw and animate.

In your Personal Files workspace, click Create New File.
A new file opens with a default artboard in the center of the canvas.
Click on the artboard name at the top of the Inspector panel on the right side.
Rename it to TaskComplete.
In the Inspector panel, find the size fields (W and H).
Set the width to 400 and the height to 400.
Click the artboard background color swatch in the Inspector panel.
Enter #F5F5F5 as the hex value. This light neutral background makes your animation elements stand out clearly.

Your artboard should now show as a 400x400 light gray square named TaskComplete in the hierarchy panel on the left.

Don't see the Inspector panel?

Make sure your artboard is selected. Click directly on the artboard in the canvas or click its name in the hierarchy panel on the left. The Inspector panel only shows properties when something is selected.

Help me find the Inspector panel in the Rive Editor

Orient yourself to the editor

You will move between three different modes throughout this project. Take a moment to locate each one now so you know where to go later.

Look at the top of the editor. You will see two mode tabs: Design and Animate.
Click Design to confirm you are in Design mode. This is where you draw shapes and build your visual elements.
Click Animate to switch to Animate mode. This is where you create timeline animations with keyframes.
Look at the bottom of the editor for the Animations panel. This is where you will create and manage your State Machine later in the project.
Switch back to Design mode. You will start here in the next step when you draw your celebration elements.

What are the three modes for?

Design mode is for drawing shapes, setting colors, and positioning elements on your artboard.

Animate mode is for creating timeline animations by setting keyframes at different points in time.

The Animations panel at the bottom is where you build a State Machine that connects your timelines with logic, turning separate animations into an interactive system.

Why Rive instead of Lottie or CSS animations?

With Lottie or CSS, you would need to write JavaScript to handle state transitions, hover detection, and sequencing between animations. Rive lets you build all of that logic visually inside the editor.

You will walk away understanding animation as a system of states and transitions, not just a linear timeline. That mental model applies everywhere in interactive design.

Your workspace is ready. Next up, you will draw the circle, checkmark, and sparkles that make up your celebration animation.

Design the Celebration Elements

Your artboard is set up and ready for action.

Every great microinteraction starts with its visual building blocks. In this step, you'll draw the four core elements that make up your celebration animation: a circle, a checkmark, sparkles, and an invisible hit area that detects user interaction.

In this step, get ready to:

Draw the main circle and a checkmark path inside it.
Create sparkle shapes positioned around the circle.
Add a transparent hit area for detecting hover and click events.

Draw the main circle and checkmark

The circle is the main character of your animation. It will breathe, brighten, squish, and fill with color across the five states you'll animate later.

Make sure you are in Design mode (the first mode tab at the top of the editor).
Select the Ellipse tool by pressing O on your keyboard.
Click and drag on the artboard to draw a circle.
In the Inspector panel on the right, set the width to 120 and the height to 120.
Center the circle on the artboard by setting its X position to 140 and Y position to 140 (so the center lands at 200, 200).
Remove any fill on the circle by clicking the fill color swatch and deleting it.
Add a stroke by clicking the + next to Stroke in the Inspector.
Set the stroke width to 4 and the stroke color to #CCCCCC (a light gray).
In the hierarchy panel on the left, double-click the shape's name and rename it to Circle.

You should see a light gray circle outline centered on your artboard.

Why start with just a stroke and no fill?

The circle begins as a hollow ring because the fill color will animate in during the celebration state. Starting empty gives you a visible before-and-after contrast when the animation fires.

Now draw the checkmark that will appear inside the circle during the celebration.

Select the Pen tool by pressing P on your keyboard.
Click to place the first point of the checkmark inside the circle, slightly left of center.
Click again to place the second point at the bottom-center of the checkmark (the bend).
Click a third time to place the final point at the top-right, completing the check shape.
Press Escape or Enter to finish the path.
In the Inspector, set the stroke width to 4 and the stroke color to #4CAF50 (a fresh green).
Set the stroke cap style to Round for a softer look.
Set the checkmark's opacity to 0% in the Inspector.
Rename this path to Checkmark in the hierarchy panel.

Why set the checkmark to 0% opacity?

The checkmark is invisible at the start because it only appears during the celebration animation. You are setting up the element now so it is ready to animate later.

Can't see the checkmark after drawing it?

Remember that you just set its opacity to 0%. Select Checkmark in the hierarchy panel and temporarily set opacity to 100% to verify it looks correct, then set it back to 0%.

If the path has a fill instead of a stroke, remove the fill and add a stroke in the Inspector.

help me fix my checkmark path in Rive

Create sparkle shapes

Sparkles are small shapes that burst outward during the celebration. They add energy and delight to the moment of completion.

Select the Rectangle tool from the toolbar.
Draw a small rectangle about 8x8 pixels.
In the Inspector, set its rotation to 45 degrees so it looks like a diamond.
Position it just outside the circle's edge (a few pixels away from the stroke).
Give it a fill color of #FFD700 (gold).
Set its opacity to 0%.
Duplicate this shape 5-7 more times (select it and press Cmd+D on macOS or Ctrl+D on Windows).
Spread the duplicates evenly around the circle's edge, like numbers on a clock face.
Vary the fill colors across the sparkles: use gold #FFD700, orange #FF9800, and pink #E91E63.
Select all the sparkle shapes in the hierarchy panel.
Right-click and choose Group to combine them.
Rename the group to Sparkles in the hierarchy panel.

Your hierarchy should now show a Sparkles group containing 6-8 diamond shapes arranged around the circle.

Why are the sparkles invisible too?

Like the checkmark, the sparkles only appear during the celebration animation. Setting them to 0% opacity now means your idle state looks clean and minimal.

Each sparkle needs to be a separate shape (not just copies in a group) because you will animate them individually later. Each one flies outward in a slightly different direction and speed.

Sparkles not appearing where expected?

Temporarily set their opacity to 100% so you can see them while positioning. Once they are placed correctly around the circle edge, set each back to 0%.

Make sure you are rotating the rectangle 45 degrees (not the entire group). Rotating the group after creation will move all sparkles together instead of making individual diamonds.

help me position sparkle shapes around a circle in Rive

Add a transparent hit area

A hit area is an invisible shape that acts as the clickable target for your State Machine Listeners.

Why use a separate hit area?

Rive's Listeners need a target shape to detect pointer events like hover and click. Using a dedicated invisible rectangle gives you a consistent, generous click target that does not depend on the circle's animated size.

This is a production pattern used in real apps. Buttons, toggles, and other interactive elements in Rive almost always have an invisible hit area shape.

Select the Rectangle tool from the toolbar.
Draw a rectangle on the artboard.
In the Inspector, set the width to 140 and the height to 140.
Center it on the artboard so it fully covers the circle area (X: 130, Y: 130).
Set its opacity to 0%.
Rename it to HitArea in the hierarchy panel.

Your hierarchy panel should now show four elements: Circle, Checkmark, the Sparkles group, and HitArea.

Keep your hierarchy organized

Naming every element clearly now saves you time later when you are connecting things in the State Machine. You will reference these exact names when creating Listeners and keyframes.

All your visual building blocks are in place. Next up, you'll bring the circle to life with its first two animations: a gentle breathing idle and a responsive hover state.

Animate the Idle and Hover States

Your celebration elements are all in place. Now it's time to bring them to life with motion.

A great microinteraction starts with subtle signals that invite the user to engage. In this step, you'll create two timeline animations: a gentle breathing pulse that tells the user "this element is alive," and a hover response that says "go ahead, click me."

In this step, get ready to:

Create a looping Idle animation with a subtle breathing scale effect.
Create a Hover animation that scales up and changes color to invite interaction.

Create the Idle timeline

The Idle animation is what users see before they interact with anything. A perfectly still element looks dead on screen. A gentle scale pulse (breathing from 100% to 103% and back) makes the circle feel alive and inviting without being distracting.

What is Animate mode?

Rive has three main modes: Design (for drawing shapes), Animate (for creating timeline keyframes), and State Machine (for connecting animations with logic). You'll switch to Animate mode now to start building your timelines.

Switch to Animate mode by clicking the Animate tab at the top of the editor.
In the Animations panel at the bottom, click the + button and select Timeline.
Name the new timeline Idle.
Select your main circle on the artboard.
At frame 0, set the circle's scale to 100% by adding a keyframe in the Inspector panel on the right.
Move the playhead to frame 30 and set the scale to 103%.
Move the playhead to frame 60 and set the scale back to 100%.
Set the timeline to loop by clicking the loop icon in the timeline controls.

Why only 103% scale?

The breathing effect should be barely noticeable. Going larger (like 110%) makes the circle look like a heartbeat, which feels urgent and alarming. A 3% scale change creates a calm, organic pulse that invites interaction without demanding attention.

Press the Play button in the timeline to preview the Idle animation. You should see your circle gently pulsing in and out.

Circle not moving?

Make sure you have the circle selected before setting keyframes. Keyframes apply to whatever is currently selected in the hierarchy.

Check that you clicked the diamond-shaped keyframe icon next to the scale property in the Inspector, not just typed a number. Without keyframes, the value won't animate.

Help me figure out why my Idle animation isn't playing in Rive.

Create the Hover timeline

The Hover animation fires when a user moves their cursor over the circle. It needs to be fast and responsive to feel like direct feedback. At 60fps, 10 frames is roughly 170ms, which is the sweet spot for hover transitions in UX design.

In the Animations panel, click the + button and select Timeline again.
Name the new timeline Hover.
Select your main circle on the artboard.
At frame 0, set the circle's scale to 100% and the stroke opacity to 100%.
Set a keyframe on the stroke color at frame 0. The color should be the current gray (#CCCCCC).
Move the playhead to frame 10.
Set the scale to 107%.
Set the stroke color to a green tint (#4CAF50 or a slightly lighter shade of it).
Select the keyframes you just created by clicking and dragging over them in the timeline.
Apply a cubic easing curve by right-clicking the keyframes and choosing a cubic interpolation option. This gives the transition a smooth, organic feel instead of a robotic linear motion.

What do easing curves do?

Linear motion (no easing) moves at a constant speed. It looks mechanical and unnatural. Cubic easing starts slow, accelerates through the middle, and decelerates at the end.

This mimics how real objects move in the physical world. It makes your hover feel responsive and polished rather than stiff.

Press Play in the timeline. You should see the circle quickly scale up to 107% while its stroke shifts from gray to green over about 170ms.

Stroke color not changing?

Make sure you keyframed the stroke color property specifically, not the fill. Your circle should have no fill, only a stroke. Click on the stroke color swatch in the Inspector to ensure your keyframes target the correct property.

If you see only scale changing, check that you added keyframes at both frame 0 AND frame 10 for the stroke color. A single keyframe won't animate.

Help me debug why my stroke color isn't animating in Rive.

Name your timelines carefully

Rive uses the exact timeline name when you add it as a state in the State Machine later. Double-check that your timelines are named exactly Idle and Hover. A typo here causes confusion when connecting transitions.

You now have two timelines that handle the first two emotional states of your microinteraction: the calm invitation and the responsive acknowledgment. Next, you'll create the animations that make clicking feel powerful and rewarding.

Animate the Celebration Sequence

Your circle now has a calm breathing pulse and a responsive hover state. These set the emotional baseline for your interaction.

In this step, you'll animate the dramatic payoff. The anticipation squish, the celebration burst, and the settled completed glow work together to create a satisfying emotional arc when the user clicks.

In this step, get ready to:

Create an Anticipation timeline with a quick squish wind-up.
Create a Celebration timeline with scale overshoot, color fill, checkmark reveal, and sparkle burst.
Create a Completed timeline with a subtle looping shimmer.

Create the Anticipation timeline

In UX animation, anticipation is a brief wind-up before the main action. Think of it like pulling back a slingshot before releasing it. This tiny squish makes the celebration feel more powerful.

Make sure you are in Animate mode (top of the editor).
In the Animations panel at the bottom, click the + button and select Timeline.
Name it Anticipation.
Select your main Circle in the hierarchy.
At frame 0, set the Circle's scale to 107%. This matches the hover size, so the transition from Hover into Anticipation is seamless.
Move the playhead to frame 5 and set the scale to 95%.

Why is this so short?

At 60fps, 5 frames is roughly 80ms. That is fast enough to feel snappy but just long enough to register in the user's brain. The squish down to 95% creates a "coiling" sensation that makes the upcoming expansion feel earned.

Press the play button to preview. You should see the circle quickly compress from 107% down to 95%.

Circle not squishing?

Make sure your playhead is on the correct frame before setting the keyframe. If both keyframes show the same value, delete them and re-add them at the correct frames.

Also confirm you have the Circle selected (not the artboard or a group) when setting scale values.

Help me troubleshoot my Anticipation timeline keyframes

Create the Celebration timeline

This is the main event. The Celebration timeline coordinates multiple elements at once: the circle expands and fills with color, the checkmark draws in, and sparkles burst outward.

In the Animations panel, click + and add another Timeline.
Name it Celebration.

This timeline has three overlapping layers of motion. You will keyframe the circle, the checkmark, and the sparkles at staggered intervals.

Keyframe the circle expansion and fill

Select the Circle.
At frame 0, set the scale to 95%. This picks up where Anticipation left off.
At frame 10, set the scale to 115%. This is the overshoot that gives the animation its energy.
Also at frame 10, change the Circle's stroke to a fill. Set the fill color to #4CAF50 (the same green as your checkmark).
At frame 20, ease the scale back down to 100%. Apply a bounce-style overshoot easing curve to this keyframe so the circle settles with a slight wobble.

What is a bounce overshoot curve?

Instead of moving from A to B in a straight line, a bounce overshoot goes past B slightly, then snaps back. In Rive, you set this by selecting a keyframe and adjusting the easing handles in the timeline graph. Pull the curve slightly above the target line to create the overshoot effect.

Keyframe the checkmark reveal

Select the Checkmark path in the hierarchy.
At frame 0, confirm its opacity is 0%.
At frame 10, set its opacity to 100%. The checkmark appears as the circle fills with color.

Trim path for a drawing effect

For a more polished look, you can use a Trim path instead of a simple opacity fade. Set the Trim End property from 0% to 100% over the same frames. This makes the checkmark look like it is being drawn in. If this feels complex, the opacity approach works great too.

Keyframe the sparkle burst

Each sparkle needs its own individual keyframes. You cannot animate grouped items as a single unit for translation.

Expand the Sparkles group in the hierarchy.
Select the first sparkle shape.
At frame 5, set its opacity to 100% and keep its position at the starting point (just outside the circle edge).
At frame 15, translate it 40-60px outward from center and set its opacity to 0%.
Repeat for each remaining sparkle, varying the direction so they radiate outward evenly around the circle.

Why do sparkles start at frame 5 instead of frame 0?

Staggering the sparkles by a few frames lets the circle expansion register first. If everything fires at once, the user cannot tell what is happening. A 2-3 frame delay gives the eye time to notice the circle filling before the sparkles pop outward.

Press play to preview the full Celebration timeline. You should see the circle expand and turn green, the checkmark appear, and the sparkles burst outward and fade.

Sparkles not appearing?

Remember that each sparkle's base opacity is 0% (set in Design mode). You need to explicitly keyframe opacity to 100% at frame 5 for each one. If you skip this keyframe, they stay invisible the entire time.

Also make sure you are keyframing individual sparkle shapes, not the Sparkles group. Group transforms do not cascade down to individual position keyframes.

Help me fix my sparkle burst animation

Create the Completed timeline

After the celebration fireworks, the circle needs to rest in a proud "done" state. A very subtle opacity shimmer communicates that the task is complete without being distracting.

In the Animations panel, click + and add another Timeline.
Name it Completed.
Select the Circle (which now has its green fill from the Celebration state).
At frame 0, set the fill opacity to 100%.
At frame 45, set the fill opacity to 92%.
At frame 90, set the fill opacity back to 100%.
Click the loop icon on this timeline to set it to loop continuously.

Why such a slow, subtle shimmer?

At 60fps, 90 frames is about 1.5 seconds per cycle. The opacity only drops to 92%, which is barely perceptible. This is intentional. The completed state should feel calm and settled, not demand attention. It reassures the user the task is done without pulling focus.

Press play to preview. You should see a very gentle pulse in the circle's brightness. It should feel like a calm glow, not a flash.

Shimmer looks too dramatic?

Double-check that frame 45 is set to 92% opacity, not a lower value like 80%. Even a small difference makes the shimmer look more like a blink than a glow. Also confirm you are animating the fill opacity, not the entire shape's opacity (which would also fade the checkmark).

Help me adjust my Completed timeline shimmer effect

You now have all five timelines ready. Next up, you will wire them together with a State Machine that responds to hover and click events.

Build the State Machine

You have five beautiful timelines, but right now they exist in isolation. None of them know when to play or how to hand off to the next.

A State Machine is what ties your timelines together into an interactive system. It defines which animation plays in response to which user action, and how the animation flows from one state to the next.

In this step, get ready to:

Add Boolean and Trigger inputs that respond to hover and click.
Create 5 states and wire transitions between them with conditions and exit times.
Add Listeners that detect pointer events on your hit area.

Add inputs to your State Machine

Inputs are the signals that tell your State Machine something happened. You need two: a Boolean to track whether the cursor is hovering, and a Trigger to fire when the user clicks.

In the Animations panel at the bottom of the editor, look for the existing State Machine (every artboard has one by default).
Double-click the State Machine to open it.
In the State Machine view, find the Inputs section on the left side.
Click the + button next to Inputs.
Select Boolean and name it isHovered.
Click the + button again.
Select Trigger and name it complete.

What are Booleans and Triggers?

A Boolean input is either true or false. It stays in whatever state you set it to until something changes it again. Perfect for tracking hover (cursor is either over the element or it is not).

A Trigger is fire-and-forget. It fires once and immediately resets. Perfect for a click action where you want to kick off a sequence exactly once.

You should now see both isHovered and complete listed in the Inputs section.

Don't see the Inputs section?

Make sure you have double-clicked the State Machine to enter its editing view. If you are still looking at the Animations list, you are one level too high.

If your artboard does not have a State Machine yet, click the + button in the Animations panel and select State Machine.

help me find the Inputs section in my Rive State Machine

Create states and transitions

Now you will add your 5 timelines as states in the State Machine graph and draw the transitions that connect them.

In the State Machine graph area, drag in your Idle timeline as a state.
Repeat for Hover, Anticipation, Celebration, and Completed.
Set the Idle state to loop by selecting it and enabling the loop option in the Inspector.
Set the Completed state to loop as well.

Now draw the transitions between states. Each transition defines when and why the animation moves from one state to another.

Draw a transition from Idle to Hover. Select the transition line and add the condition: isHovered equals true.
Draw a transition from Hover back to Idle. Set the condition: isHovered equals false.
Draw a transition from Hover to Anticipation. Set the condition: trigger complete.
Draw a transition from Anticipation to Celebration. Set the exit time to 100%.
Draw a transition from Celebration to Completed. Set the exit time to 100%.

What is exit time?

Exit time delays a transition until the current animation reaches a certain percentage of its playback. Setting it to 100% means the transition fires only when the current animation finishes playing completely.

This is why Anticipation automatically flows into Celebration, and Celebration flows into Completed. No user action needed for those handoffs.

Your State Machine graph should now show 5 states connected by 5 transition arrows.

Transition not firing in the right direction?

Make sure you started the transition line from the correct source state. The arrow direction matters. If it points the wrong way, delete it and redraw from the correct starting state.

Also check that the trigger condition on the Hover to Anticipation transition uses complete (not isHovered). The trigger fires on click, while the Boolean tracks hover.

help me fix my State Machine transitions in Rive

Add Listeners to detect pointer events

Your State Machine has inputs and transitions, but nothing is actually sending those signals yet. Listeners are the bridge between the user's pointer and your inputs.

In the State Machine panel, switch to the Listeners tab.
Click the + icon to create a new Listener.
Set the Target to your HitArea shape.
Set the Condition to Pointer Enter.
Set the Action to Input Change, then choose isHovered and set it to true.

That is your first Listener. Now create two more.

Create a second Listener. Set Target to HitArea, Condition to Pointer Exit, and Action to Input Change setting isHovered to false.
Create a third Listener. Set Target to HitArea, Condition to Click, and Action to Input Change firing the trigger complete.

Why use a transparent hit area instead of the circle?

Rive's documentation recommends using shapes with 0% opacity as listener targets. Your circle's scale changes during animations, which could make the clickable area unpredictable.

The HitArea rectangle stays fixed at 140x140px regardless of what the circle is doing. This gives the user a stable, generous target.

You should now have 3 Listeners listed in the Listeners tab, all targeting HitArea.

Can't find HitArea in the target dropdown?

The target dropdown shows shapes by their name in the hierarchy panel. Switch back to Design mode and check that your transparent rectangle is named exactly HitArea (no spaces, capital H and A).

If you renamed it differently in a previous step, update the name now so it matches what your Listeners expect.

help me connect my Listeners to the HitArea in Rive

Your State Machine is fully wired. Next up, you will hit Play and watch your five timelines come alive as one seamless interaction.

Test, Polish, and Iterate

Your State Machine is fully wired up with inputs, transitions, and listeners. Now it is time to see it in action and make it feel amazing.

Testing an interactive animation is not just about checking that it works. It is about feeling whether the timing, easing, and sequencing create the emotional response you intended. In this step, you will play through the full interaction, tighten up sluggish moments, and add the subtle polish that separates a functional prototype from a delightful one.

In this step, get ready to:

Test the full hover and click interaction in preview mode.
Fine-tune animation timing and easing curves for snappy responsiveness.
Polish sparkle rotation and checkmark timing for a delightful finish.

Play and test the full flow

The State Machine preview mode lets you interact with your animation exactly as a user would. This is where you find out if your transitions, conditions, and listeners are all firing correctly.

In the Animations panel at the bottom, make sure your State Machine is selected (not one of the individual timelines).
Click the Play button to enter preview mode.
Hover your cursor over the circle. You should see it scale up to 107% and the stroke color shift toward green.
Move your cursor away from the circle. It should ease back down to its idle breathing state.
Hover again, then click the circle. Watch for the full sequence: anticipation squish, celebration burst with sparkles and checkmark, then the soft completed glow.

What should I see?

The full sequence should play in this order: the circle squishes down briefly (anticipation), then pops outward while filling green and drawing in the checkmark (celebration), sparkles burst outward and fade, and finally the circle settles into a gentle pulsing glow (completed).

If any transition does not fire, check that your conditions match exactly. The isHovered boolean must be spelled identically in both the Input and the transition condition.

Nothing happens when you hover or click?

Make sure you are in the State Machine preview (not a timeline preview). The Play button should be on the State Machine row in the Animations panel.

Check your Listeners. Each one must target HitArea specifically. If the target is set to the circle or artboard instead, the pointer events will not register correctly.

Also verify the HitArea rectangle fully covers the circle. If it is too small, your cursor might miss it.

Help me debug why my State Machine transitions are not firing in Rive

Fine-tune timing and easing

Your animation works, but does it feel right? Timing is everything in microinteraction design. Transitions that are too slow feel sluggish. Transitions that are too fast feel jarring.

Click the Stop button to exit preview mode.
Switch to Animate mode at the top of the editor.
Select the Hover timeline in the Animations panel. Confirm it is 10 frames or fewer (under 170ms at 60fps). If it runs longer, drag the final keyframes closer to frame 10.
Select the Anticipation timeline. This should be extremely quick. If your squish keyframe is at frame 5 and it still feels sluggish, try moving it to frame 3 or 4.
Select the Celebration timeline. Click the scale keyframes on the circle (frames 1-10 and 10-20).
In the Inspector panel on the right, find the easing curve selector for these keyframes. Choose a cubic or elastic curve that overshoots slightly before settling. This gives the celebration its energetic bounce.

Why does easing matter so much?

Linear keyframes make motion feel robotic. Easing curves mimic real physics. A cubic ease-out decelerates naturally, like a ball rolling to a stop. An elastic curve overshoots and bounces back, adding playful energy.

For the celebration scale animation, the overshoot to 115% followed by a settle to 100% is what makes it feel like the circle is bursting with excitement rather than simply resizing.

Play the State Machine preview again to test your timing changes.
Hover and click. The hover should feel instant and responsive. The anticipation should be a quick blink of compression before the celebration fires.

The 170ms rule

UX research shows that feedback animations under 170ms feel instantaneous to users. Anything longer starts to feel like a delay. Keep your hover and anticipation transitions within this window for maximum snappiness.

Polish the details

The difference between a good animation and a great one lives in the tiny details. Two small tweaks will make your celebration feel much more organic and intentional.

Stop the preview and switch back to Animate mode.
Select the Celebration timeline.
Click on each sparkle shape individually in the hierarchy panel.
For each sparkle, add a rotation keyframe at frame 5 set to 0 degrees, and another at frame 15 set to a value between 15 and 30 degrees. Vary the rotation amount per sparkle so they do not all spin identically.
Now locate the checkmark's opacity keyframes in the Celebration timeline. The checkmark currently fades in starting at frame 1.
Shift the checkmark's first opacity keyframe from frame 1 to frame 3. This creates a 2-3 frame delay after the circle starts filling green, giving the viewer time to register the color change before the checkmark appears.

Why delay the checkmark?

When two visual changes happen simultaneously, the brain struggles to process both. By letting the green fill register first (2-3 frames is about 30-50ms), the checkmark appearing becomes its own distinct moment of satisfaction. This sequencing technique is called staggering and it is a core principle in motion design.

Play the State Machine preview one more time.
Hover over the circle, then click. Watch the sparkles closely. They should rotate slightly as they fly outward, creating an organic, explosive feel.
Watch the checkmark. You should notice the circle fills green first, and then the checkmark draws in a split second later.
If anything feels off, stop the preview, adjust the keyframe positions or easing, and test again. Repeat until the entire flow feels responsive and delightful.

Sparkles look stiff or mechanical?

Make sure you are keyframing rotation on each sparkle individually, not on the Sparkles group. Group-level rotation spins the entire cluster as one unit. You want each piece to rotate independently.

Also check that you are varying both the rotation amount and the translate distance per sparkle. Identical values on every piece create an unnatural uniformity.

Help me make my sparkle animations look more organic in Rive

Your animation is now polished and portfolio-ready. The full interaction responds to hover with snappy feedback, builds anticipation on click, delivers a satisfying celebration burst, and settles into a calm completed state.

Secret mission

Add Confetti Rain

Your celebration already feels great with the sparkle burst. But what if you could layer on a second wave of motion? In this secret mission, you'll create falling confetti particles on an independent State Machine layer that fires alongside your main celebration.

Clean Up Your Resources

This project runs entirely in the browser-based Rive Editor, so there are no ongoing costs or local processes to shut down.

Resources you used:

A free Rive account at rive.app.
A Rive file containing your "TaskComplete" artboard, timelines, and State Machine.

Keep everything running

No action needed. Choose this if you plan to keep iterating on your animation or want to use it as a reference for future Rive projects.

Your Rive file stays in your Personal Files workspace and is accessible anytime at editor.rive.app.
The free plan includes unlimited personal files, so there is no cost to keeping it.

Pause - I'll come back to this later

Since Rive is browser-based and your free plan has no limits on personal files, there is nothing to pause. Your file will be waiting for you whenever you come back.

Bookmark editor.rive.app so you can find it quickly later.
Your animations, State Machine, and all progress are saved automatically in your Rive workspace.

Delete - I don't want to use this again

Remove your project file and optionally your account if you do not plan to use Rive again.

Open your Personal Files workspace in the Rive Editor.
Right-click your TaskComplete file and select delete.
To delete your Rive account entirely, go to your account settings and look for the option to delete your account.

That's a Wrap!

Nice work! You just designed a complete interactive microinteraction system from scratch in Rive.

You've learned how to:

Built 5 timeline animations covering the full emotional arc of a task completion, from idle breathing to celebration burst to a satisfied completed state.
Constructed a State Machine with boolean and trigger inputs, conditional transitions, and exit-time logic that sequences everything automatically.
Added Listeners that respond to pointer events (hover and click) without writing any code.
Created a multi-layer confetti rain effect that fires independently alongside the main celebration on a second State Machine layer.

Ready to quiz yourself?