this repo has no description
Obviously got to flex my scroll-driven animation CSSkillz
+24
-1
+18
src/components/status.css
+18
src/components/status.css
···
1328
1328
background-color: var(--outline-color);
1329
1329
}
1330
1330
1331
+
@keyframes media-carousel-slide {
1332
+
0% {
1333
+
transform: translateX(calc(var(--dots-count, 1) * 5px));
1334
+
}
1335
+
100% {
1336
+
transform: translateX(calc(var(--dots-count, 1) * -5px));
1337
+
}
1338
+
}
1339
+
1331
1340
.status-media-first {
1341
+
timeline-scope: --media-carousel;
1342
+
1332
1343
.meta-name {
1333
1344
opacity: 0.65;
1334
1345
transition: opacity 0.5s ease-in-out;
···
1376
1387
border-inline-width: 0;
1377
1388
background-color: var(--bg-faded-color); */
1378
1389
box-shadow: 0 0 0 var(--hairline-width) var(--outline-color);
1390
+
scroll-timeline: --media-carousel x;
1379
1391
1380
1392
@media (min-width: 40em) {
1381
1393
margin-inline: 0;
···
1500
1512
margin-top: 8px;
1501
1513
padding: 8px;
1502
1514
1515
+
@supports (animation-timeline: scroll()) {
1516
+
animation: auto media-carousel-slide linear both;
1517
+
animation-timeline: --media-carousel;
1518
+
}
1519
+
1503
1520
.carousel-dot {
1504
1521
display: inline-block;
1505
1522
width: 5px;
···
1508
1525
background-color: var(--text-color);
1509
1526
transition: all 0.3s ease-in-out;
1510
1527
opacity: 0.3;
1528
+
flex-shrink: 0;
1511
1529
1512
1530
&.active {
1513
1531
opacity: 1;
+6
-1
src/components/status.jsx
+6
-1
src/components/status.jsx
···
2344
2344
)}
2345
2345
</div>
2346
2346
{moreThanOne && (
2347
-
<div class="media-carousel-dots">
2347
+
<div
2348
+
class="media-carousel-dots"
2349
+
style={{
2350
+
'--dots-count': mediaAttachments.length,
2351
+
}}
2352
+
>
2348
2353
{mediaAttachments.map((media, i) => (
2349
2354
<span
2350
2355
key={media.id}