• 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

Passive values

A passive value is a value that isn’t animated directly. It only changes when another value changes.

posed.div({
  draggable: 'x',
  passive: {
    opacity: ['x', interpolate(
      [-200, -100, 100, 200],
      [0, 1, 1, 0]
    )]
  }
})

Site

  • Blog

Open source

  • Pose
  • Popmotion Pure
  • Popcorn
  • Stylefire
  • Framesync

Made in London with 🌯

© 2014-2019 Framer BV