Virtual + framer-motion
Is it possible to animate the appearance and disappearance of rows using framer-motion?
I am currently experiencing that framer-motion conflicts with virtual.
I need to animate the height change for each row.
I encounter that when using animatepresence and motion, the element for which transform: translateY is applied behaves unpredictably.
Since each row has an initial height of 0, the virtual tries to render all elements at once, which causes freezes.
If you use animatepresence, even without row animation, you can see the row being pulled during scroll.
I was under the impression that it couldn't be done.
P.S. Each row has a different height.
Example:
const Component = () => {
const table = useReactTable({...});
const { rows } = table.getRowModel();
const tableContainerRef = useRef<HTMLDivElement>(null);
const virtualizer = useVirtualizer({...})
const items = virtualizer.getVirtualItems();
return (
<div ref={tableContainerRef}>
<div
style={{
height: virtualizer.getTotalSize(),
minHeight: '45rem',
}}
>
<div role="table">
<div
role="rowgroup"
style={{
transform:
translateY(${items[0]?.start ?? 0}px),
}}
>
<AnimatePresence>
{items.map((virtualRow) => {
const row = rows[virtualRow.index];
return (
<motion.div
data-index={virtualRow.index}>
ref={virtualizer.measureElement}
role="row"
initial={{ opacity: 0, height: 0 }}
animate={{ opacity: 1, height: 'auto' }}
exit={{ opacity: 0, height: 0 }}
Content
</motion.div>
);
})}
</AnimatePresence>
</div>
</div>
</div>
</div>
)};8 Replies
ambitious-aqua•13mo ago
I haven't ever tried it with
framer-motion tbh, nor have I touched the virtualization stuff in a while.ambitious-aqua•13mo ago
That being said, I have a virtualized table setup here, if you want to poke around.
https://github.com/SeanCassiere/nv-rental-clone/blob/master/src/routes/_auth/(reports)/-components/view-report/plugin/table.tsx
GitHub
nv-rental-clone/src/routes/_auth/(reports)/-components/view-report/...
Navotar with Tailwind and the Tanstack. Contribute to SeanCassiere/nv-rental-clone development by creating an account on GitHub.
correct-apricotOP•13mo ago
@Sean Cassiere Thanks, but I've already looked into that.
Will this be implemented in the future?
ambitious-aqua•13mo ago
I honestly haven't had the time to look into that project in a while. Busy with Router, Start, as well as doing my Masters. Maybe next year I'll get some time off 😅
correct-apricotOP•13mo ago
That's too bad. I've been struggling with this for a few days. Tried all options, but no result. Freezes and conflicts when these two libraries are used.
ambitious-aqua•13mo ago
Its possible that it may not even be possible, since framer-motion uses JS to interpolate sizes and to perform its animations. Whilst, virtual generally needs be able measure and do its virtualization stuff.
If you've got a reproduction that someone can work with, it may be worth heading over to #virtual-questions
correct-apricotOP•13mo ago
Thank you.
like-gold•13mo ago
i have a repro (not using translateY):
https://codesandbox.io/p/sandbox/tanstack-table-virtual-animation-framer-motion-frp7j9
It seems like something between framer and table/virtual is causing a re-render of elements when it shouldn't be.
For example, if you change the number of elements to like 8, you'll notice that deleting an item will not animate properly. I believe this is happening because the update to the items in the table + virtual is causing a re-render