How to Create a Parallax Depth Effect in Rive

When I first started building scenes in Rive, one thing that kept bothering me was how flat they could feel. Everything moved at the same speed, so nothing felt close and nothing felt far away.

The fix turned out to be parallax. In this tutorial we'll build a submarine porthole looking out into the ocean, with fish swimming at different depths, all from a single animation in Rive. By the end a flat 2D design will feel three dimensional, and more importantly, you'll understand why it works so you can use it on any Rive scene.

What parallax is, and why it creates depth

Parallax is the effect where objects close to you move faster than objects far away. Look out a train window: the fence beside the track rushes past, while the hills in the distance barely move. Your eye reads that difference in speed as distance.

That is the whole principle. When everything moves at the same speed, the scene reads as flat. Give each layer its own speed, and the same flat art starts to feel deep. Once you understand that, the rest is mostly setup.

What we have in the file

The file has a single animation where every fish swims across the screen, from left to right, in an infinite loop, all on one Timeline. The fish have their own small swim animation built as a Component, a gentle Scale animation that makes them feel alive in the water.

Right now every fish moves at the same speed, so there is no sense of depth. The fish are grouped into three sizes: Fish Large, Fish Medium, and Fish Small. What we want is for the large fish, the ones closest to us, to swim faster, the medium fish slower, and the small fish, the ones furthest away, slowest of all.

The core idea: one animation, three speeds

Here is the part that does the real work. Instead of animating each group separately, we take the one animation we already have, split it into three, and let each copy run at its own speed.

1. Duplicate the Timeline three times. Name them Fish Large, Fish Medium, and Fish Small.
2. Clean each copy. On the Fish Large Timeline, delete the keyframes for every fish that is not large. Do the same for Medium and Small, so each Timeline only moves its own group.
3. Put each Timeline on its own State Machine Layer. Create three layers, each responsible for a single group. Now they play in parallel instead of competing over one Timeline.
4. Change the Speed per layer. This is where the depth comes from. Each Timeline has a Speed value. Leave the large fish at 1. Set the medium fish to 0.7. Set the small fish to 0.5. You never touch the animation itself, only how fast it plays.

Run the State Machine and the depth appears. The large fish glide past, the medium fish drift behind them, and the small fish move slowly in the distance. Same animation, three speeds.

Adding more layers of depth

The speed difference alone already reads as depth. A few more layers take it further, and each one is doing the same job: giving the eye another cue to read as distance.

• Light. A lighter gradient layer near the top of the water suggests sunlight coming down through the surface.
• A background layer. A darker, slightly blurred layer that drifts gently left and right adds one more plane behind the fish.
• Bubbles. A small script sends bubbles rising from the bottom of the frame to the top. Give the bubbles their own parallax so the larger ones rise faster than the smaller ones.
• The porthole frame. A foreground frame that we look through is one of the most reliable ways to suggest depth. It also crops the scene, so you never have to draw a full edge to edge ocean.

The detail that sells it: color

Objects further away catch less light, so they look slightly darker and less saturated. To make the distance feel real, add two very subtle darkening layers, each around three percent black. Place one behind the medium fish and one behind the small fish. Now the small fish sit a touch darker than the medium, and the medium a touch darker than the large. On its own the difference is barely visible, but it is what makes the depth feel physical instead of drawn.

Why this works

Every piece here does one thing: it gives the eye a difference in speed or in light to read as distance. The animation itself is simple, a Scale on the fish and a Position X move across the screen. The depth does not come from complex animation. It comes from splitting one Timeline into layers and letting each one run at its own pace.

Try it on your own scene

Take any flat scene you are building in Rive, clouds, a city skyline, a forest, and separate it into a few depth groups. Give each group the same motion, then change the Speed per layer. That single change is the difference between a flat illustration and a scene with real depth.