• API
  • Learn
  • Examples
Examples
  • React

    • Accordion
    • CSS variables
    • Enter/exit: Single component
    • Events: Drag with boundaries
    • Events: Drag
    • Events: Focus
    • Events: Hover
    • Events: Press
    • CSS filters
    • CSS outline
    • PoseGroup: Reordering items
    • Medium-style image zoom
    • Route transitions: Reach Router
    • Route transitions: React Router
    • SplitText as children
    • SplitText custom animations
    • SplitText UI events
    • SplitText
    • SVG Morphing
  • Vue

    • Animating children
    • Enter/exit transitions
    • FLIP
    • Magic animations
    • Medium-style image zoom
    • Passive values
    • UI events: Drag
    • UI events: Focus
    • UI events: Hover
    • UI events: Press

Events: Focus

To animate an element on focus, set focusable: true and a focus prop.

const config = {
  focusable: true,
  init: {
    color: '#aaa',
    outlineWidth: '0px',
    outlineOffset: '0px',
    scale: 1
  },
  focus: {
    color: '#000',
    outlineWidth: '12px',
    outlineOffset: '5px',
    outlineColor: '#AB36FF',
    scale: 1.2
  }
}

Site

  • Blog

Open source

  • Pose
  • Popmotion Pure
  • Popcorn
  • Stylefire
  • Framesync

Made in London with 🌯

© 2014-2019 Framer BV