Skip to content

Commit 621d88d

Browse files
rainxchzedrainxchzed
committed
Speed up animations across site (reveals, hero, steps, app handoff).
1 parent 41f0084 commit 621d88d

3 files changed

Lines changed: 37 additions & 37 deletions

File tree

‎app/index.html‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@
124124
display: flex;
125125
align-items: center;
126126
justify-content: center;
127-
transition: background 500ms var(--motion-standard), color 500ms var(--motion-standard);
127+
transition: background 250ms var(--motion-standard), color 250ms var(--motion-standard);
128128
}
129129
a { color: var(--md-primary); text-decoration: none; }
130130

@@ -158,15 +158,15 @@
158158
max-width: 480px; width: calc(100% - 32px);
159159
text-align: center; box-shadow: var(--elevation-3);
160160
opacity: 0; transform: translateY(30px) scale(0.97);
161-
animation: cardIn 800ms 200ms var(--motion-emphasized) forwards;
161+
animation: cardIn 500ms 80ms var(--motion-emphasized) forwards;
162162
}
163163
@keyframes cardIn { to { opacity: 1; transform: translateY(0) scale(1); } }
164164

165165
.app-icon {
166166
width: 80px; height: 80px; border-radius: 20px;
167167
margin: 0 auto 24px; box-shadow: var(--elevation-2);
168168
opacity: 0; transform: scale(0.5);
169-
animation: iconPop 600ms 500ms var(--motion-spring) forwards;
169+
animation: iconPop 400ms 200ms var(--motion-spring) forwards;
170170
}
171171
@keyframes iconPop { to { opacity: 1; transform: scale(1); } }
172172

@@ -177,7 +177,7 @@
177177
border-radius: var(--shape-full); font-size: 0.8125rem; font-weight: 500;
178178
margin-bottom: 20px;
179179
opacity: 0; transform: translateY(10px);
180-
animation: fadeUp 600ms 700ms var(--motion-emphasized) forwards;
180+
animation: fadeUp 400ms 300ms var(--motion-emphasized) forwards;
181181
}
182182
.status__dot {
183183
width: 8px; height: 8px; border-radius: 50%;
@@ -190,7 +190,7 @@
190190
.title {
191191
font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2;
192192
margin-bottom: 10px; opacity: 0; transform: translateY(15px);
193-
animation: fadeUp 700ms 800ms var(--motion-emphasized) forwards;
193+
animation: fadeUp 450ms 380ms var(--motion-emphasized) forwards;
194194
}
195195
.title em {
196196
font-style: normal;
@@ -201,17 +201,17 @@
201201
font-size: 1.125rem; font-weight: 600; color: var(--md-primary);
202202
margin-bottom: 8px; word-break: break-all;
203203
opacity: 0; transform: translateY(12px);
204-
animation: fadeUp 600ms 900ms var(--motion-emphasized) forwards;
204+
animation: fadeUp 400ms 460ms var(--motion-emphasized) forwards;
205205
}
206206
.subtitle {
207207
font-size: 0.9375rem; color: var(--md-on-surface-variant); line-height: 1.65;
208208
margin-bottom: 32px; opacity: 0; transform: translateY(12px);
209-
animation: fadeUp 600ms 1000ms var(--motion-emphasized) forwards;
209+
animation: fadeUp 400ms 540ms var(--motion-emphasized) forwards;
210210
}
211211

212212
.spinner-wrap {
213213
margin-bottom: 28px; opacity: 0;
214-
animation: fadeUp 500ms 1100ms var(--motion-emphasized) forwards;
214+
animation: fadeUp 350ms 620ms var(--motion-emphasized) forwards;
215215
transform: translateY(10px);
216216
}
217217
.spinner {
@@ -224,7 +224,7 @@
224224
.actions {
225225
display: flex; flex-direction: column; gap: 12px;
226226
opacity: 0; transform: translateY(12px);
227-
animation: fadeUp 600ms 1200ms var(--motion-emphasized) forwards;
227+
animation: fadeUp 400ms 700ms var(--motion-emphasized) forwards;
228228
}
229229
.btn {
230230
display: inline-flex; align-items: center; justify-content: center; gap: 10px;

‎assets/css/site.css‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@ body {
127127
color: var(--md-on-surface);
128128
line-height: 1.6;
129129
overflow-x: hidden;
130-
transition: background 500ms var(--motion-standard), color 500ms var(--motion-standard);
130+
transition: background 250ms var(--motion-standard), color 250ms var(--motion-standard);
131131
}
132132

133133
a { color: var(--md-primary); text-decoration: none; }
@@ -165,7 +165,7 @@ body::before {
165165
background: transparent;
166166
backdrop-filter: blur(0px);
167167
-webkit-backdrop-filter: blur(0px);
168-
transition: all 400ms var(--motion-standard);
168+
transition: all 250ms var(--motion-standard);
169169
}
170170

171171
.top-bar.scrolled {
@@ -195,7 +195,7 @@ body::before {
195195
.top-bar__brand img {
196196
width: 36px; height: 36px;
197197
border-radius: var(--shape-sm);
198-
transition: transform 400ms var(--motion-spring);
198+
transition: transform 260ms var(--motion-spring);
199199
}
200200

201201
.top-bar__brand:hover img { transform: scale(1.1) rotate(-4deg); }
@@ -247,7 +247,7 @@ body::before {
247247
position: absolute;
248248
opacity: 0;
249249
transform: scale(0.4) rotate(-120deg);
250-
transition: all 500ms var(--motion-spring);
250+
transition: all 300ms var(--motion-spring);
251251
}
252252

253253
.theme-toggle[data-active="sun"] .t-sun,
@@ -398,7 +398,7 @@ body::before {
398398
font-weight: 500;
399399
width: fit-content;
400400
opacity: 0; transform: translateY(20px);
401-
animation: fadeUp 700ms 200ms var(--motion-emphasized) forwards;
401+
animation: fadeUp 450ms 80ms var(--motion-emphasized) forwards;
402402
}
403403

404404
.hero__badge__dot {
@@ -428,7 +428,7 @@ body::before {
428428
line-height: 1.08;
429429
letter-spacing: -0.035em;
430430
opacity: 0; transform: translateY(30px);
431-
animation: fadeUp 800ms 350ms var(--motion-emphasized) forwards;
431+
animation: fadeUp 500ms 150ms var(--motion-emphasized) forwards;
432432
}
433433

434434
.hero__title em {
@@ -445,7 +445,7 @@ body::before {
445445
line-height: 1.7;
446446
max-width: 500px;
447447
opacity: 0; transform: translateY(25px);
448-
animation: fadeUp 800ms 500ms var(--motion-emphasized) forwards;
448+
animation: fadeUp 500ms 250ms var(--motion-emphasized) forwards;
449449
}
450450

451451
.hero__actions {
@@ -454,7 +454,7 @@ body::before {
454454
gap: 14px;
455455
margin-top: 12px;
456456
opacity: 0; transform: translateY(25px);
457-
animation: fadeUp 800ms 650ms var(--motion-emphasized) forwards;
457+
animation: fadeUp 500ms 350ms var(--motion-emphasized) forwards;
458458
}
459459

460460
/* Stats */
@@ -465,7 +465,7 @@ body::before {
465465
padding-top: 28px;
466466
border-top: 1px solid var(--md-outline-variant);
467467
opacity: 0; transform: translateY(20px);
468-
animation: fadeUp 800ms 800ms var(--motion-emphasized) forwards;
468+
animation: fadeUp 500ms 450ms var(--motion-emphasized) forwards;
469469
}
470470

471471
.hero__stat__value {
@@ -488,7 +488,7 @@ body::before {
488488
align-items: center;
489489
position: relative;
490490
opacity: 0; transform: translateY(40px) scale(0.95);
491-
animation: fadeUpScale 1000ms 400ms var(--motion-emphasized) forwards;
491+
animation: fadeUpScale 600ms 180ms var(--motion-emphasized) forwards;
492492
}
493493

494494
.hero__phone { position: relative; width: 280px; z-index: 2; }
@@ -557,17 +557,17 @@ body::before {
557557

558558
.hero__chip--1 {
559559
top: 8%; left: -60px;
560-
animation: chipIn 600ms 900ms var(--motion-spring) forwards, chipFloat 5s 1600ms ease-in-out infinite;
560+
animation: chipIn 400ms 550ms var(--motion-spring) forwards, chipFloat 5s 1200ms ease-in-out infinite;
561561
}
562562

563563
.hero__chip--2 {
564564
bottom: 12%; right: -70px;
565-
animation: chipIn 600ms 1100ms var(--motion-spring) forwards, chipFloat 5s 1900ms ease-in-out infinite;
565+
animation: chipIn 400ms 700ms var(--motion-spring) forwards, chipFloat 5s 1400ms ease-in-out infinite;
566566
}
567567

568568
.hero__chip--3 {
569569
top: 55%; left: -50px;
570-
animation: chipIn 600ms 1300ms var(--motion-spring) forwards, chipFloat 5s 2200ms ease-in-out infinite;
570+
animation: chipIn 400ms 850ms var(--motion-spring) forwards, chipFloat 5s 1600ms ease-in-out infinite;
571571
}
572572

573573
@keyframes chipIn {
@@ -980,7 +980,7 @@ body::before {
980980
border: 1px solid var(--md-outline-variant);
981981
border-radius: var(--shape-xl);
982982
padding: 40px 32px;
983-
transition: all 500ms var(--motion-emphasized);
983+
transition: all 280ms var(--motion-emphasized);
984984
position: relative;
985985
overflow: hidden;
986986
}
@@ -992,7 +992,7 @@ body::before {
992992
width: 180px; height: 180px;
993993
border-radius: 50%;
994994
opacity: 0;
995-
transition: opacity 500ms var(--motion-standard);
995+
transition: opacity 260ms var(--motion-standard);
996996
}
997997

998998
.feature-card:nth-child(1)::after { background: radial-gradient(circle, var(--md-glow-strong), transparent 70%); }
@@ -1016,7 +1016,7 @@ body::before {
10161016
margin-bottom: 28px;
10171017
position: relative;
10181018
z-index: 1;
1019-
transition: transform 400ms var(--motion-spring);
1019+
transition: transform 260ms var(--motion-spring);
10201020
}
10211021

10221022
.feature-card:hover .feature-card__icon { transform: scale(1.1) rotate(-3deg); }
@@ -1073,7 +1073,7 @@ body::before {
10731073
height: 100%;
10741074
width: 0%;
10751075
background: linear-gradient(90deg, var(--md-primary), var(--md-tertiary));
1076-
transition: width 1800ms var(--motion-emphasized);
1076+
transition: width 900ms var(--motion-emphasized);
10771077
}
10781078

10791079
.steps__line.animate::after { width: 100%; }
@@ -1099,7 +1099,7 @@ body::before {
10991099
justify-content: center;
11001100
font-size: 1.5rem;
11011101
font-weight: 700;
1102-
transition: all 700ms var(--motion-spring);
1102+
transition: all 400ms var(--motion-spring);
11031103
position: relative;
11041104
}
11051105

@@ -1112,7 +1112,7 @@ body::before {
11121112
border: 2px solid var(--md-primary);
11131113
opacity: 0;
11141114
transform: scale(0.8);
1115-
transition: all 600ms var(--motion-spring);
1115+
transition: all 350ms var(--motion-spring);
11161116
}
11171117

11181118
.step.active .step__number {
@@ -1235,7 +1235,7 @@ body::before {
12351235
align-items: center;
12361236
justify-content: center;
12371237
margin-top: 1px;
1238-
transition: transform 400ms var(--motion-spring);
1238+
transition: transform 260ms var(--motion-spring);
12391239
}
12401240

12411241
.checklist li:hover .check-icon { transform: scale(1.15); }
@@ -1346,20 +1346,20 @@ body::before {
13461346
.reveal {
13471347
opacity: 0;
13481348
transform: translateY(40px);
1349-
transition: opacity 800ms var(--motion-emphasized), transform 800ms var(--motion-emphasized);
1349+
transition: opacity 450ms var(--motion-emphasized), transform 450ms var(--motion-emphasized);
13501350
}
13511351

13521352
.reveal.visible { opacity: 1; transform: translateY(0); }
13531353

13541354
.reveal-stagger > *:nth-child(1) { transition-delay: 0ms; }
1355-
.reveal-stagger > *:nth-child(2) { transition-delay: 150ms; }
1356-
.reveal-stagger > *:nth-child(3) { transition-delay: 300ms; }
1357-
.reveal-stagger > *:nth-child(4) { transition-delay: 450ms; }
1355+
.reveal-stagger > *:nth-child(2) { transition-delay: 70ms; }
1356+
.reveal-stagger > *:nth-child(3) { transition-delay: 140ms; }
1357+
.reveal-stagger > *:nth-child(4) { transition-delay: 210ms; }
13581358

13591359
.reveal-scale {
13601360
opacity: 0;
13611361
transform: scale(0.92);
1362-
transition: opacity 800ms var(--motion-emphasized), transform 800ms var(--motion-emphasized);
1362+
transition: opacity 450ms var(--motion-emphasized), transform 450ms var(--motion-emphasized);
13631363
}
13641364

13651365
.reveal-scale.visible { opacity: 1; transform: scale(1); }
@@ -1775,7 +1775,7 @@ body.has-announce {
17751775
box-shadow: 0 6px 18px -10px var(--warn-glow);
17761776
overflow: hidden;
17771777
transform: translateY(-100%);
1778-
animation: announceSlideIn 600ms 200ms var(--motion-emphasized) forwards;
1778+
animation: announceSlideIn 350ms 80ms var(--motion-emphasized) forwards;
17791779
}
17801780

17811781
@keyframes announceSlideIn {

‎index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -336,7 +336,7 @@ <h2 class="cta__title">Ready to try GitHub Store?</h2>
336336
entries.forEach(e => {
337337
if (e.isIntersecting) {
338338
stepsLine.classList.add('animate');
339-
steps.forEach((s, i) => setTimeout(() => s.classList.add('active'), 400 + i * 400));
339+
steps.forEach((s, i) => setTimeout(() => s.classList.add('active'), 200 + i * 220));
340340
stepsObs.unobserve(e.target);
341341
}
342342
});
@@ -351,7 +351,7 @@ <h2 class="cta__title">Ready to try GitHub Store?</h2>
351351
function animateCounters() {
352352
if (countersDone) return; countersDone = true;
353353
counters.forEach(el => {
354-
const target = +el.dataset.count, suffix = el.dataset.suffix || '', dur = 1800, start = performance.now();
354+
const target = +el.dataset.count, suffix = el.dataset.suffix || '', dur = 1100, start = performance.now();
355355
(function tick(now) {
356356
const t = Math.min((now - start) / dur, 1);
357357
el.textContent = fmtNum(Math.round((1 - Math.pow(1 - t, 3)) * target)) + suffix;

0 commit comments

Comments
 (0)