Make avatars scale smoothly during animations

This commit is contained in:
Robin Townsend 2023-01-30 23:43:45 -05:00
parent e3081c1c06
commit 0166eb67fb
3 changed files with 11 additions and 1 deletions

View file

@ -66,6 +66,12 @@ limitations under the License.
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* To make avatars scale smoothly with their tiles during animations, we
override the styles set on the element */
--avatarSize: calc(min(var(--tileWidth), var(--tileHeight)) / 2);
width: var(--avatarSize) !important;
height: var(--avatarSize) !important;
border-radius: 10000px !important;
}
@media (min-height: 300px) {

View file

@ -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,

View file

@ -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;