title: Animate entry of (only new) elements in a virtualized list
body: <p>I am using <code>react-window</code> <code>FixedSizedList</code> and <code>react-virtualized-auto-sizer</code> <code>Autosizer</code> components to build a list/table UI element that may contain thousands of items that also receives new items via a websocket connection and prepends them to the list. I now have a requirement to <strong>animate the entry of new elements in this list</strong>.</p>
  <p>Here is a codesandbox link with a minimal (and not quite working) example: <a href="https://codesandbox.io/s/admiring-northcutt-jfn3sg" rel="nofollow noreferrer">codesandbox</a>.</p>
  <p>Note how the <code>.row</code> animation is triggered for every child of <code>FixedSizedList</code> each time the data list receives a new item. Also note how the <code>.row</code> animation is again triggered for every child of <code>FixedSizedList</code> when the list is scrolled.</p>
  <p>I understand that the reason this is happening is because of how list virtualization works using absolute positioning of the children rows. Every time a new item is inserted into data, or the list is scrolled, <code>react-window</code> needs to re-compute the <code>style</code> prop for each row, which recreates every DOM element and hence re-triggers the <code>.row</code> animation.</p>
  <p><strong>I would like to animate only the new <code>.row</code> DOM elements when they appear.</strong></p>
  <p>Things I have tried:</p>
  <ol>
  <li>Add <code>animation-iteration-count: 1;</code> to the <code>.row</code> class. This doesn't work for the same reason mentioned above as every element is re-created on a new item insert.</li>
  <li>Animate only the first row (example using red background in the code sandbox). While this &quot;works&quot;, it's not quite suitable. In my production site, updates are not guaranteed to come through one at a time - multiple rows might be inserted at the same time. All new rows should be animated when they are added to the DOM. This can be replicated in the code sandbox by inserting two UUID's at once in the hook.</li>
  <li>Not use list virtualization. This of course works fine, but is not suitable. In my production site this list could contain thousands of items.</li>
  <li><a href="https://stackoverflow.com/questions/40685264/how-can-i-animate-the-removal-or-addition-of-elements-from-a-react-virtualized">Reading this previous question</a>. The previous question is sparse of information, does not have a minimal example, and has no useful answers or comments. Additionally, it is over 5 years old.</li>
  </ol>
  <p>How is it possible to achieve the result I'm looking for here?</p>
  <p>EDIT:</p>
  <p>A further attempt I have tried, extending on 2) above:</p>
  <ul>
  <li>Save a copy of the &quot;old&quot; list of items each render. When an update is received, subtract the length of the old list from the length of the new list (call this number <code>n</code>). Animate the top <code>n</code> items of the new list. This &quot;works&quot;, but the production system has some intricacies making this solution insufficient - each list item is dated with an ISO timestamp, and the list is sorted according to timestamp new -&gt; old. Updates received via websocket also have a timestamp, <strong>but there is no guarantee the new item will always be newer than the current top of the list - in some cases, new items are inserted into position 2, 3 or further down in the list</strong>. In this case, animating the top <code>n</code> items based on the length change would not be accurate.</li>
  </ul>