How to Create a 3D Coin Flip in Rive With Just 3 Elements

3D effects in Rive can feel like a big leap. You might assume you need complex tools or dozens of layers to pull off a convincing rotation. But a realistic coin flip? Three elements and a single Constraint.

In this tutorial, we'll walk through building a 3D coin flip from scratch in Rive. No plugins, no external 3D software. Just smart use of Scale, position offsets, and one Constraint that ties the whole thing together.

The Core Idea: Faking 3D With Scale

The trick behind this effect is surprisingly straightforward. When you scale a shape horizontally (Scale X), it squashes. And that squash naturally creates a sense of rotation, like the object is turning away from you.

Start by selecting your coin group and adjusting its Scale X. Make sure Scale X and Scale Y are unlinked so you're only affecting the horizontal axis. Even this simple change already starts to feel like a rotation.

But there's a catch. On its own, the coin looks flat. No depth, no thickness. Just a shape getting thinner.

Building Front and Back

To create real depth, you need two copies of the coin: a front and a back.

1. Rename your current coin group to Coin Front

2. Duplicate it and call the copy Coin Back

3. Move Coin Back behind the front in the hierarchy

4. Group both under a parent group called Coin Master

Now scale both layers down using Scale X. They collapse into each other - the back is completely hidden behind the front. But offset them slightly (the front 10 pixels to the right, the back 10 pixels to the left) and something clicks. The shape starts to feel like a 3D object with actual volume.

For the back layer, remove any texture. It's only there to represent thickness. Give it a slightly darker color so it reads as depth, not as a duplicate.

Linking With a Scale Constraint

Before animating, you need both layers to scale together. Otherwise, you'd have to manually keyframe each one.

Select the Coin Back and add a Scale Constraint. Set it to copy only the Scale X property from the Coin Front. Now when you scale the front, the back follows automatically.

This is one of those small Rive features that saves a lot of manual work. One control point drives both layers.

Animating the Flip

Switch to Animate Mode and set up the rotation:

1. Add a keyframe to the Coin Front Scale X at frame 0

2. Bring Scale X down to 0 over 25 frames (about one second at 25fps)

3. Add keyframes to both layers Position X at the start

4. Over the same duration, move the front layer 10px right and the back layer 10px left

As the coin rotates, the layers spread apart and you get a convincing sense of depth. But there is a problem: at the midpoint, both layers compress to nothing. The coin vanishes.

Adding the Edge

This is where the third element comes in. You need a rectangle that represents the side of the coin, the visible edge when it is turned.

1. Switch to Design Mode and add a new rectangle

2. Set its width to 20 pixels (matching the total offset between front and back)

3. Match its color to the Coin Back (use the eyedropper to sample the darker tone)

4. Group it as Edge Master and place it inside your main coin group

5. In the hierarchy, position it behind the Coin Front but in front of the Coin Back

Now animate the edge Scale X to go from 0% at the start (invisible when the coin faces you) to 100% at the midpoint (fully visible when the coin is on its side).

With the edge in place, the coin finally feels solid during rotation.

Completing the Full Rotation

The first half of the flip takes the coin from face-on to its edge. For the second half, you need the reverse, but there is an important detail.

If you just copy the first keyframes to the end, the coin snaps backward instead of continuing forward. The depth reversal makes the motion feel wrong.

The fix: swap the positions of Coin Front and Coin Back at the midpoint.

1. One frame after the midpoint, set the Front to -10px and the Back to +10px

2. Set these transition keyframes to Hold interpolation (so the swap is instant, not animated)

3. Copy the original position and scale keyframes to the end of the timeline

4. Apply Ease In to the first half and Ease Out to the second half

Now the coin rotates in one continuous direction, completing a full flip.

Adding Multiple Spins

Once you have a single flip working, extending it is straightforward.

Set the Work Area to match the animation length (50 frames for a full rotation). In the State Machine, add the timeline again and connect it to the first, with Exit Time set to 100%.

You can stack as many flips as you want. For a natural feel, try making each successive spin slightly faster.

What You Built

With just three elements (a front, a back, and an edge), one Scale Constraint, and some position offsets, you have created a convincing 3D coin flip. No 3D engine, no complex rigging.

From here, you can push it further:

• Add a Solo Group to show different artwork on each side of the coin

• Set the State Machine to loop infinitely

• Add highlights or shadow layers for extra polish

• Adjust easing curves until the motion feels just right

This is what makes Rive so effective for interactive animation. You can build effects that look complex using simple, well-structured techniques.

Want to Go Deeper?

This coin flip is a great example of what you can achieve with a solid understanding of Rive core features. If you want to build this kind of confidence across the full tool, the Rive Masterclass covers everything from the basics to advanced techniques like Constraints, State Machines, Data Binding, and Scripting. One project, built step by step, with the thinking behind every decision.