xmj/element-call
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix tiles not animating in the new grid layout

Browse source 
The new grid layout has been broken ever since upgrading react-spring, because it was apparently relying on a buggy behavior of react-spring that started transitions automatically even in imperative mode. react-spring 9.5.1 fixed that behavior, which means we now need to manually start the animations.
This commit is contained in:
Robin Townsend 2023-06-09 13:52:21 -04:00
parent f070ab7f67
commit 554da08628
1 changed files with 7 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/video-grid/NewVideoGrid.tsx
View file

@ -266,11 +266,16 @@ export const NewVideoGrid: FC<Props> = ({
}, },
leave: { opacity: 0, scale: 0, immediate: disableAnimations }, leave: { opacity: 0, scale: 0, immediate: disableAnimations },
config: { mass: 0.7, tension: 252, friction: 25 }, config: { mass: 0.7, tension: 252, friction: 25 },
}), })
[tiles, disableAnimations]
// react-spring's types are bugged and can't infer the spring type // react-spring's types are bugged and can't infer the spring type
) as unknown as [TransitionFn<Tile, TileSpring>, SpringRef<TileSpring>]; ) as unknown as [TransitionFn<Tile, TileSpring>, SpringRef<TileSpring>];
// Because we're using react-spring in imperative mode, we're responsible for
// firing animations manually whenever the tiles array updates
useEffect(() => {
springRef.start();
}, [tiles, springRef]);
const animateDraggedTile = (endOfGesture: boolean) => { const animateDraggedTile = (endOfGesture: boolean) => {
const { tileId, tileX, tileY, cursorX, cursorY } = dragState.current!; const { tileId, tileX, tileY, cursorX, cursorY } = dragState.current!;
const tile = tiles.find((t) => t.item.id === tileId)!; const tile = tiles.find((t) => t.item.id === tileId)!;