this repo has no description
Scroll-driven avatar shrinking
+17
+17
src/components/account-info.css
+17
src/components/account-info.css
···
432
432
filter: blur(16px) opacity(0.2);
433
433
}
434
434
}
435
+
@keyframes shrink-avatar {
436
+
0% {
437
+
width: 64px;
438
+
height: 64px;
439
+
}
440
+
100% {
441
+
width: 2.5em;
442
+
height: 2.5em;
443
+
}
444
+
}
435
445
.sheet .account-container {
436
446
border-radius: 16px 16px 0 0;
437
447
overflow-x: hidden;
438
448
max-height: 75vh;
439
449
overscroll-behavior: none;
450
+
scroll-timeline: --account-scroll;
440
451
441
452
header {
442
453
padding-bottom: 16px;
···
468
479
animation: bye-banner 1s linear both;
469
480
animation-timeline: view();
470
481
animation-range: contain 100% cover 100%;
482
+
}
483
+
484
+
header .avatar {
485
+
animation: shrink-avatar 1s linear both;
486
+
animation-timeline: --account-scroll;
487
+
animation-range: 0 150px;
471
488
}
472
489
}
473
490