Skip to main content
Version: next

Focus Animations

The focus prop animates on focus/blur: the keyboard/assistive-tech equivalent of hover.

Usage​

import { animate, withSpring } from 'react-ui-animate';

<animate.input
  type="text"
  focus={{
    scale: withSpring(1.02),
    borderColor: withSpring('#60a5fa'),
    boxShadow: withSpring('0 0 0 3px rgba(96, 165, 250, 0.25)'),
  }}
  style={{ border: '1px solid rgba(255,255,255,0.14)', outline: 'none' }}
/>
Preview
caution

If you set outline: 'none' to replace the browser default, the focus animation is the focus indicator. Don't remove one without providing the other, or keyboard users lose all focus feedback.

Combining with hover​

<animate.button
  hover={{ scale: withSpring(1.1) }}
  focus={{
    scale: withSpring(1.05),
    boxShadow: withSpring('0 0 0 3px rgba(96, 165, 250, 0.3)'),
  }}
>
  Accessible Button
</animate.button>

Next steps​