• 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

UI events: Hover

Making an element hoverable in Pose for Vue is a simple matter of setting press to true, with associated poses:

posed.div({
  hoverable: true,
  init: {
    scale: 1,
    boxShadow: '0px 0px 0px rgba(0,0,0,0)'
  },
  hover: {
    scale: 1.2,
    boxShadow: '0px 5px 10px rgba(0,0,0,0.2)'
  }
})

Site

  • Blog

Open source

  • Pose
  • Popmotion Pure
  • Popcorn
  • Stylefire
  • Framesync

Made in London with 🌯

© 2014-2019 Framer BV