Shopping CartFree Rive Animation
A shopping cart full of gifts. Tap it and it drives off one side and comes back in from the other.
Get the file
Runtime
.rivReady to use in your app or website.
Free
Editable
.revOpen it in the Rive editor and change anything.
Free
Learn to build it
Full accessBuild this yourself, step by step. Every file in the library is included.
Courses from $119
Use it in your own products and client work. Please don't resell or share the files themselves.
Using this file
The licence →Can I use it in a commercial product or a client project?
Yes. Use it in your own apps, websites and games, and in work you do for clients, paid or not. Change it as much as you like. Read the full licence
Can I resell or share the file?
No. Please don't resell, redistribute or re-upload the files, as they are or changed, and don't bundle them into templates, asset packs or UI kits, free or paid. If someone wants one, share a link to this page instead. Read the full licence
Do I need to credit you?
No, credit isn't required. A mention or a link back is always appreciated, though. Read the full licence
What's the difference between the .riv and the .rev?
The .riv is the runtime file: it goes into your app or website and plays there. The .rev is the editable source: you open it in the Rive editor to change the design, the animation or the state machine, then export your own .riv. Read the full licence
I own a course. Do I get it?
Yes. If you own the Rive Masterclass or the Rive Scripting Course, every file in the library is yours, the .riv and the .rev. Sign in with the email you bought the course with and the downloads unlock. Read the full licence
Who owns the files?
The files stay © Tom Acco / Rive Masterclass. When you download or buy one, you get a licence to use it, not ownership of it. Read the full licence
Use it on your site
import { useRive } from '@rive-app/react-canvas';
export function ShoppingCart() {
const { rive, RiveComponent } = useRive({
src: '/shopping-cart.riv',
artboard: 'Shopping Cart',
stateMachines: 'State Machine',
autoplay: true,
autoBind: true,
});
// every input on this page is a view model property
const vm = rive?.viewModelInstance;
if (vm) vm.trigger('cartGo').trigger();
return <RiveComponent style={{ width: '100%', height: 400 }} />;
}Inputs: cartGo. All on the ShoppingCart view model.
How it's built
A gold shopping cart piled with black and gold gifts, standing on a dark shop floor. Tap it and it pops a wheelie, races off the right edge, rolls back in from the left and settles with a wobble. It is the cart from the Black Friday Street, on its own.
- 1The cart is a nested artboardThe cart and its gifts are one component with its own gentle idle, placed inside a rig of two groups.
- 2Two pivots make the wheelieOne group turns around the back wheel for the wheelie, the other tilts the body, so the lean and the drive never fight.
- 3Off one side, in from the otherThe drive timeline moves the rig past the right edge, then a hold key jumps it past the left edge, so it rolls back in.
- 4One trigger starts itA tap fires cartGo, the state machine plays the drive once and goes back to idle.
