A switch whose knob runs on a spring: it stretches as it moves, squashes when it lands, and the track blends to its new colour. On, off and knob colours come from data.
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
- 1A real springStiffness and damping, so a fast tap overshoots a little.
- 2Stretch with speedThe knob stretches with its speed and squashes on landing.
- 3On is a booleanTap flips it; your app can set it too.
Use it on your site
import { useRive } from '@rive-app/react-canvas';
export function SquashToggle() {
const { rive, RiveComponent } = useRive({
src: '/squash-toggle.riv',
artboard: 'Squash Toggle',
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('onColor').value = 0xFF7C4DFF;
return <RiveComponent style={{ width: '100%', height: 400 }} />;
}Inputs: on, onColor, offColor, knobColor. All on the SquashToggle view model.