Setting the file. One moment. Gsap Min
(opens in a new tab)
references/motion-primitives/counting-punch/scene.html
HTML·119 lines·3 KB
7 --hg-cyan: #2afff0;
8 --hg-bg: #0a0a0f;
9 --hg-fg: #f5f5fa;
10 --hg-dim: #6b6b78;
11 }
12 * {
13 margin: 0;
14 padding: 0;
15 box-sizing: border-box;
16 }
17 .stage {
18 position: absolute;
19 inset: 0;
20 display: flex;
21 flex-direction: column;
22 align-items: center;
23 justify-content: center;
24 gap: 30px;
25 }
26 .counter {
27 font-weight: 900;
28 font-size: 360px;
29 letter-spacing: -0.04em;
30 font-variant-numeric: tabular-nums;
31 color: var(--hg-fg);
32 will-change: transform, text-shadow;
33 line-height: 1;
34 }
35 .caption {
36 font-family: "JetBrains Mono", monospace;
37 font-size: 28px;
38 color: var(--hg-dim);
39 letter-spacing: 0.3em;
40 text-transform: uppercase;
41 opacity: 0;
42 }
43 .underline {
44 height: 4px;
45 background: var(--hg-violet-2);
46 width: 0;
47 box-shadow: 0 0 20px var(--hg-violet);
48 }
49 </style>
50 <div class="stage">
51 <div class="counter" id="counter">0</div>
52 <div class="underline" id="underline"></div>
53 <div class="caption" id="caption">USERS THIS WEEK</div>
54 </div>
55 <script>
56 window.__timelines = window.__timelines || {};
57 const tl = gsap.timeline({ paused: true });
58
59 const TARGET = 12847;
60 const counter = { v: 0 };
61 let lastShown = 0;
62
63 function format(n) {
64 return Math.floor(n).toLocaleString("en-US");
65 }
66
67 tl.to(
68 counter,
69 {
70 v: TARGET,
71 duration: 1.15,
72 ease: "expo.out",
73 onUpdate: function () {
74 const el = document.getElementById("counter");
75 if (!el) return;
76 const cur = Math.floor(counter.v);
77 if (cur !== lastShown) {
78 el.textContent = format(cur);
79 // tiny scale tick on each digit change
80 el.style.transform = "scale(1.045)";
81 el.style.textShadow = "0 0 40px rgba(168, 85, 247, 0.6)";
82 // browser will paint, then this resets via the next onUpdate
83 }
84 lastShown = cur;
85 },
86 },
87 0.15,
88 );
89
90 // Big settle punch at landing
91 tl.to(
92 "#counter",
93 {
94 scale: 1.12,
95 textShadow: "0 0 80px rgba(168, 85, 247, 0.9)",
96 duration: 0.1,
97 ease: "power4.out",
98 },
99 1.3,
100 );
101 tl.to(
102 "#counter",
103 {
104 scale: 1.0,
105 textShadow: "0 0 20px rgba(168, 85, 247, 0.4)",
106 duration: 0.6,
107 ease: "elastic.out(1, 0.55)",
108 },
109 1.4,
110 );
111
112 // Underline draws
113 tl.to("#underline", { width: 420, duration: 0.6, ease: "expo.out" }, 1.35);
114 tl.to("#caption", { opacity: 1, duration: 0.5, ease: "power2.out" }, 1.55);
115
116 window.__timelines["counting-punch"] = tl;
117 </script>
118 </div>
119</template>