A success animation for forms and checkouts: the circle pops in, the tick draws itself and rays flash outward. Circle colour, tick colour and size come from data, and it replays on tap.
Every control here is a view model input in the file. Your app sets the same ones.
Pick your format
Free for your projects, personal or commercial. Don't resell the file itself.
Get the .rivFree. Sent to your inbox, ready to drop in.
How it's built
- 1Pop, then drawThe circle overshoots in, then the tick draws by its length.
- 2Rays to finishEight short rays flash out and fade.
- 3Play is an inputFlip it from your app when the form succeeds.
Use it on your site
import { useRive } from '@rive-app/react-canvas';
export function SuccessCheck() {
const { rive, RiveComponent } = useRive({
src: '/success-check.riv',
artboard: 'Success Check',
stateMachines: 'State Machine',
autoplay: true,
autoBind: true,
});
// every input on this page is a view model property
const vm = rive?.viewModelInstance;
if (vm) vm.color('color').value = 0xFF22C55E;
return <RiveComponent style={{ width: '100%', height: 400 }} />;
}Inputs: color, checkColor. All on the SuccessCheck view model.