B3 Swatches Article
Animations
Choose swatch and quantity animation styles, then disable motion on mobile if it adds friction.
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.
Browse docs
Swatch motion
Choose the main motion style for hover feedback on swatches and selectors.
Swatch animation adds feedback without changing the actual selection logic. Use the built-in motion types sparingly. They should confirm interaction, not dominate the form.
Quantity motion
Quantity controls have their own motion settings and triggers.
Quantity controls have a separate animation setting, which is useful if you want the plus/minus controls to feel related to the swatches without being identical.
- Separate setting
- The quantity control can use a different animation family than the swatches if needed.
- Consistency
- Keep timing and intensity close enough that the full product form still feels coherent.
- Scope
- Use animation for feedback, not as a primary cue that quantity changed.
Motion on mobile
Use mobile animation cutoffs when motion adds more friction than value on touch devices.
The plugin has separate toggles for disabling swatch animation and quantity animation on mobile. Use them if motion adds lag, clutter, or friction on touch devices.