• 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

PoseGroup: Reordering items

When posed items in a PoseGroup component are reordered, they’re automatically animated to their new position:

const Item = posed.li();

export default ({ items }) => (
  <PoseGroup>
    {items.map(({ id }) => <Item key={id} />)}
  </PoseGroup>
)

Site

  • Blog

Open source

  • Pose
  • Popmotion Pure
  • Popcorn
  • Stylefire
  • Framesync

Made in London with 🌯

© 2014-2019 Framer BV