Has anyone animated a virtualized list with gsap to stagger in the list items on page load?
Has anyone animated a virtualized list with gsap to stagger in the list items on page load, in a Next.JS app? I have a useWindowVirtualizer setup, and I am trying to animate it in, but having trouble selecting individual list items, no matter where I position the ref that GSAP uses for the animation, and no matter which part of the windowVirtualizer container elements I select. Has anyone tried this?
The closest I got was animating in the entire windowVirtualizer container (not the individual items) but this also causes issues when I scroll because it seems to re-trigger an animation.
6 Replies
conscious-sapphire•2y ago
I'm struggling with the exact same thing, but with
framer-motion. Really difficult to achieve. If I manage to get items animated... I can easily invoke a "max call depth exceeded" error and crash the entire app 😢sensitive-blue•2y ago
Hmm few weeks back was doing some animations on rows with https://floating-ui.com/docs/useTransition @henryb can you share a stackblitz example maybe i can help
useTransition | Floating UI
A JavaScript library to position floating elements and create interactions for them.
sensitive-blue•2y ago
This should help with animation of item sizes https://github.com/TanStack/virtual/pull/702
sensitive-blue•2y ago
Maybe let's add an example with animation, what kind would be most common, removing element from the list?
conscious-sapphire•2y ago
Yea I think the most common animation requirement would simply be a "per-item entrance animation".
Exit animations don't really matter... because the exit would happen off-screen. In fact - if using something like
framer-motion - you really should NOT wrap with AnimatePresence as that requires cloning elements and can lead to nasty performance issues for exiting elements.
Something simple like a "fade in item" upon entrance is a good example. In my StackBlitz, I added a scale animation as well just because its important to understand where that scale should apply. Messing with the physical size of an item for animation can cause problems capturing its bounding client rect. Therefor, any scale/transform should be applied to a child of the element.
Reference: https://stackblitz.com/edit/vurtis?file=src%2Fdemo%2FVirtualGrid%2FVirtualGrid.tsx
But also - as OP has requested - a "stagger animation" for initial mount of the virtualized list would be really good to see. I have not personally done this myself, but it should be do able.
However, for me personally, the holy grail would be a "re-arrange" animation. I attempted to do this but failed.
Imagine a virtualized list that can be "re-ordered" (sort asc / desc). It would be cool to see the items move to their new location (translate or position animation).sensitive-blue•2y ago
Ok, thanks @beefchimi for input 👍
However, for me personally, the holy grail would be a "re-arrange" animation. I attempted to do this but failed.from high level to make this work would need to change the strategy, not position each row but the whole block, also would be good to skip updating sizes if ResizeObserver kicks in while animating