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

The Core Idea: Faking 3D With Scale

The foundational technique involves manipulating Scale X to create the illusion of rotation. By adjusting the horizontal scale of a shape independently from its vertical scale, the object appears to compress, generating a convincing sense of three-dimensional movement away from the viewer.

Building Front and Back

Depth emerges through duplication and strategic layering:

1. Rename your coin group to Coin Front
2. Duplicate it as Coin Back
3. Position Coin Back behind the front in the hierarchy
4. Create a parent group called Coin Master containing both

When both layers are scaled down using Scale X, they initially overlap completely. However, offsetting them slightly—the front 10 pixels right and back 10 pixels left—creates the perception of volume. The back layer should be stripped of texture and colored darker to suggest depth rather than appearing as a duplicate.

Linking With a Scale Constraint

A Scale Constraint ensures synchronized movement. Select Coin Back and add a Scale Constraint configured to copy only the Scale X property from Coin Front. This single control mechanism automates the scaling of both layers simultaneously, eliminating manual keyframing requirements.

Animating the Flip

The animation sequence unfolds as follows:

1. Add keyframes for Coin Front Scale X at frame 0
2. Reduce Scale X to 0 over 25 frames (approximately one second at 25fps)
3. Establish Position X keyframes for both layers at the starting point
4. Animate the front layer 10 pixels rightward and the back layer 10 pixels leftward

A critical issue emerges: both layers compress to invisibility at the midpoint, causing the coin to vanish entirely.

Adding the Edge

A third element resolves this visibility problem—a rectangle representing the coin's edge when turned:

1. Switch to Design Mode and create a new rectangle
2. Set width to 20 pixels (matching the front-to-back offset)
3. Match its color to the darker Coin Back using the eyedropper tool
4. Group it as Edge Master within your main coin group
5. Position it behind Coin Front but ahead of Coin Back in the hierarchy

Animate the edge's Scale X from 0% (invisible when facing forward) to 100% (fully visible when perpendicular).

Completing the Full Rotation

The second half of the rotation requires careful positioning. Simply reversing the first keyframes causes the coin to snap backward unnaturally due to depth reversal.

The solution involves swapping layer positions at the midpoint:

1. One frame after the midpoint, set Front to -10px and Back to +10px
2. Apply Hold interpolation to these keyframes for instant transitions
3. Replicate the original position and scale keyframes at the animation's end
4. Use Ease In for the first half and Ease Out for the second half

This approach maintains continuous forward rotation throughout the complete flip.

Adding Multiple Spins

Extending to multiple rotations is straightforward. Adjust the Work Area to match animation length (50 frames for full rotation). Within the State Machine, add the timeline again and connect it to the first with Exit Time set to 100%. Multiple flips can be stacked, with successive spins potentially accelerated for naturalness.

What You Built

This technique demonstrates how three simple elements combined with one constraint and positional adjustments create sophisticated visual effects without external 3D software or complex rigging.

Further refinements include:

• Solo Groups for displaying different artwork per side
• Infinite looping via State Machine
• Additional highlights or shadows for polish
• Fine-tuned easing curves for motion quality