B3 Swatches Article

Animations

Choose swatch and quantity animation styles, then disable motion on mobile if it adds friction.

Introduction

Animation settings add feedback to the selector without changing how the form works. Keep the motion brief and consistent so it confirms interaction instead of slowing the page down.

Swatch motion

Choose the main motion style for hover feedback on swatches and selectors.

Quantity motion

Quantity controls have their own motion settings and triggers.

Motion on mobile

Use mobile animation cutoffs when motion adds more friction than value on touch devices.