{items.map(item =" /> {items.map(item =" /> {items.map(item ="/>

Trying to reorder components in React with Framer Motion without parent scrolling

296 Views Asked by At

I have a list of items and i need to animate reordering with code. Something like this:

<ul className="max-h-[450px] overflow-auto">
  {items.map(item => (
    <motion.li
      key={item.id}
      layout
    >
      <Item onActivate={handleActivate} {...item} />
    </motion.li>
  ))}
</ul>

Item component is just a simple button with onClick={onActivate}

onActivate reorders some components with .sort() and animation works great. Reordered items slides to new position as expected, but parent <ul> element scrolls to top and i don't know how to stop it. I want it to stay in exact same scroll position as it was before reordering. I've tried to change overflow-auto to overflow-hidden or overflow-clip while it was animating, but it makes no difference

0

There are 0 best solutions below