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