Skip to main content
Version: Next

Focus Animations

Focus animations provide visual feedback when users navigate with keyboards or assistive technologies. The focus prop triggers animations when elements receive focus, improving accessibility and user experience.

Basic Usage​

The focus prop accepts an animation descriptor that runs when the element receives focus:

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

function FocusInput() {
  return (
    <animate.input
      type="text"
      placeholder="Click or tab to focus"
      focus={{
        scale: withSpring(1.02),
        borderColor: withSpring('#3399ff'),
      }}
      style={{
        padding: '10px',
        border: '2px solid #e1e1e1',
        borderRadius: 4,
        outline: 'none',
      }}
    />
  );
}

Real-World Examples​

Example 1: Form Input​

function FormInput({ label, type = 'text' }) {
  return (
    <div>
      <label>{label}</label>
      <animate.input
        type={type}
        focus={{
          scale: withSpring(1.02),
          borderColor: withSpring('#3399ff'),
          boxShadow: withSpring('0 0 0 3px rgba(51, 153, 255, 0.1)'),
        }}
        style={{
          width: '100%',
          padding: '10px',
          border: '2px solid #e1e1e1',
          borderRadius: 4,
          outline: 'none',
        }}
      />
    </div>
  );
}

Example 2: Focusable Card​

function FocusableCard({ children }) {
  return (
    <animate.div
      tabIndex={0}
      focus={{
        scale: withSpring(1.05),
        borderColor: withSpring('#3399ff'),
        boxShadow: withSpring('0 4px 12px rgba(51, 153, 255, 0.2)'),
      }}
      style={{
        width: 200,
        height: 200,
        background: 'white',
        border: '2px solid transparent',
        borderRadius: 8,
        padding: 20,
        cursor: 'pointer',
        outline: 'none',
      }}
    >
      {children}
    </animate.div>
  );
}

Example 3: Button with Focus Ring​

function AccessibleButton({ children, onClick }) {
  return (
    <animate.button
      onClick={onClick}
      focus={{
        scale: withSpring(1.05),
        boxShadow: withSpring('0 0 0 3px rgba(51, 153, 255, 0.3)'),
      }}
      style={{
        padding: '12px 24px',
        backgroundColor: '#3399ff',
        color: 'white',
        border: 'none',
        borderRadius: 8,
        outline: 'none',
      }}
    >
      {children}
    </animate.button>
  );
}

Accessibility Best Practices​

✅ Do​

  • Always provide focus indicators for keyboard navigation
  • Use visible focus styles (don't rely on browser defaults)
  • Combine with hover for mouse users
  • Test with keyboard navigation (Tab key)

❌ Don't​

  • Don't remove focus styles (accessibility requirement)
  • Don't make focus animations too subtle
  • Don't use outline: none without providing alternative focus styles
  • Don't forget to test with screen readers

Combining with Other Props​

Combine focus with hover for complete interaction feedback:

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

Next Steps​