Open a Treasure Chest in Rive With Just Two Drawings

Tap the chest and it squashes, pops open, and light pours out of it.

What if I told you there is no lid animation here at all? No hinge, nothing rotating. There are two drawings of the chest, one closed and one open, and the file switches between them in a single frame. Scrub the timeline and you can see it: at frame 5 the chest is closed, at frame 6 it is already open.

The switch is a hard cut. What hides it is the movement around it.

The one idea

Swap the drawing in the middle of a movement, and the eye never sees the swap.

The chest squashes, stretches and shakes, and somewhere inside all that motion it changes from closed to open. That is the whole tutorial.

Two components, same size, same spot

The starter file has two components: the closed chest and the open chest. The important part is that they are the same size and sit in almost exactly the same spot. That is what lets us swap them without anyone noticing.

On the main Artboard there is only the closed chest. Duplicate it, and in the Properties panel switch the copy to the open chest. Now both sit on top of each other. They don't have to be pixel perfect, because the movement is going to cover the small differences.

A Solo shows one at a time

Right now both chests are visible at once. We want only one.

Select the group that holds them, right-click, and choose Convert to Solo. A Solo is a group that shows only one of its children. You get a radio button next to each chest, and the best part is that you can key it in a timeline. So "open or closed" becomes one property you can animate.

If you followed the pumpkin tutorial, it is the exact same Solo.

Move the Origin to the floor

Before animating, look at the group's Origin, the point it scales and rotates from. By default it sits in the middle of the chest.

That is a problem. Squash the chest from the middle and it shrinks into itself and floats off the floor. Rotate it and it spins around its own center. A chest sits on the ground, so we want it to press into the floor and rock on its base.

Press Y for Freeze mode, which moves the Origin without moving the chest, and drag it to the bottom center of the chest. The chest has a bit of perspective, so it doesn't have to be exact. I nudged mine a little to the right, closer to the chest's center of mass.

Now scale it down and the bottom stays on the floor. Rotate it and it rocks on its base.

The swap on its own looks bad

On the Open timeline, key the Solo on the closed chest, move a few frames ahead and switch it to the open one. Play it.

It works, and it looks wrong. The drawing just jumps, and you can spot every small difference between the two chests. Nothing hides the cut.

Squash, then let Elastic do the stretch

The fix is squash and stretch, plus a little anticipation: before a big movement, a smaller one that tells the eye something is about to happen. Here, the chest gets pressed down as if something inside is pushing to get out.

Key the main group's Scale:

• Frame 0: 100 / 100
• Frame 5: X 115, Y 85. Wider and shorter by the same amount, so it looks squashed, not smaller.
• Then back to 100 / 100, about 35 frames later.

Right now the motion is Linear, so it moves at a constant speed. Select the squash Keyframe and change its easing to Elastic. Elastic comes back like a spring: it passes the target, comes back, and settles. The Period controls how bouncy it is (smaller means more bounce). I used 0.3.

Here is the nice part: you don't need a Keyframe for the stretch. When Elastic overshoots on its way back to 100, the chest gets taller than normal. That overshoot is the stretch.

That bounce on its own is already useful. Put it on any button or icon that gets tapped and it instantly feels more alive.

Swap inside the stretch

Now bring the Solo back. Key it on the closed chest at frame 0, and switch it to the open chest right as the chest starts to stretch.

There is still only one frame between closed and open. But now there is motion all around it, and the eye is busy following the squash. Play it at full speed and the swap disappears.

Add a shake before it opens

It works, but the chest opens out of nowhere. So let's give it more anticipation: a shake, as if something inside is trying to break out.

First, drag all the Keyframes you have forward to make room at the start. Then key the main group's Rotation. Because the Origin is on the floor, the chest rocks on its base.

• Frame 0: 0
• Frame 2: -3
• Frame 6: 3

Notice the timing. From the middle to one side is 3 degrees, so 2 frames. From side to side is 6 degrees, twice as far, so twice as long: 4 frames. Keep the same 2-frame step and the second swing would be twice as fast, and the shake would feel jumpy.

Keep going every 4 frames and let it grow: -5, 5, -7, 7. Then bring it back down the same way: -5, 5, -3, 3, -1, 1, and 0. Add easing to the whole shake so it feels softer.

Open while it's still shaking

Play it and you'll see two separate things: the chest shakes, stops, and then opens. That breaks the trick, because the whole point is for the shake to hide the opening.

So move the squash and the swap back into the shake. I don't open it at the peak. I open it a moment after, when the shake is already calming down. It looks like it's over, and then it bursts open. That makes the opening feel like a surprise.

Now there are two techniques working together: a rotation that builds tension, and a squash and stretch that opens the chest while it settles. Nobody will notice it is just two drawings.

The finished file

In the finished file there is no shake at all. The chest just breathes, and opens the moment you tap it. Tap again and it closes, built with the same tools in reverse: a small lift, then it lands with a squash.

On top of that I added sound, light rays coming out of the chest and gold particles floating up. Every one of them helps hide the swap even more. A flash at the moment it opens would work too.

One more small thing: the wood color is a single property. Change it and the whole chest follows, because the highlights and shadows are blend layers on top of the color, not fixed colors.

Use it in your app

Any time something changes between two states, you can use this trick: a gift box that opens, a reward in a game, a drawer, a menu that pops, a "you earned it" moment in an app. Squash it, stretch it, and swap inside the movement.

Go further

The tap, the open and close, and the State Machine behind them are what I teach step by step in the Rive Masterclass. We build a weather app, and when you tap the avatar it uses this exact idea: the Origin, squash and stretch, and Elastic.

The particles are a script, not Keyframes. If you want to build effects like that yourself, that's the Rive Scripting course, where we build an interactive space game with the AI agent.

In the next tutorial I'll show you how to make the light rays and the particles.

Get the starter file

The starter file has both chests ready as components, so you only build the trick.