Make avatars scale smoothly during animations
This commit is contained in:
parent
e3081c1c06
commit
0166eb67fb
3 changed files with 11 additions and 1 deletions
|
@ -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) {
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Add table
Reference in a new issue