Make avatars scale smoothly during animations

src/video-grid/NewVideoGrid.tsx

@@ -563,7 +563,7 @@ export const NewVideoGrid: FC<Props> = ({
       >
         {slots}
       </div>
-      {tileTransitions(({ shadow, ...style }, tile) =>
+      {tileTransitions(({ shadow, width, height, ...style }, tile) =>
         children({
           ...bindTile(tile.item.id),
           key: tile.item.id,
@@ -571,6 +571,8 @@ export const NewVideoGrid: FC<Props> = ({
             boxShadow: shadow.to(
               (s) => `rgba(0, 0, 0, 0.5) 0px ${s}px ${2 * s}px 0px`
             ),
+            "--tileWidth": width.to((w) => `${w}px`),
+            "--tileHeight": height.to((h) => `${h}px`),
             ...style,
           },
           width: tile.width,

src/video-grid/VideoTile.module.css

@@ -18,6 +18,8 @@ limitations under the License.
   position: absolute;
   top: 0;
   will-change: transform, width, height, opacity, box-shadow;
+  width: var(--tileWidth);
+  height: var(--tileHeight);
   border-radius: 20px;
   overflow: hidden;
   cursor: pointer;