Setting the file. One moment. Gsap Min
(opens in a new tab)
references/motion-primitives/slot-machine-reveal/scene.html
HTML·100 lines·3 KB
#7c3aed
;
11 --hg-violet-2: #a855f7;
12 --hg-bg: #0a0a0f;
13 --hg-fg: #f5f5fa;
14 --hg-dim: #6b6b78;
15 }
16 * {
17 margin: 0;
18 padding: 0;
19 box-sizing: border-box;
20 }
21 .stage {
22 position: absolute;
23 inset: 0;
24 display: flex;
25 align-items: center;
26 justify-content: center;
27 }
28 .slot {
29 font-family: "JetBrains Mono", monospace;
30 font-weight: 700;
31 font-size: 280px;
32 letter-spacing: 0.04em;
33 color: var(--hg-fg);
34 display: flex;
35 gap: 30px;
36 }
37 .slot .digit {
38 display: inline-block;
39 min-width: 1ch;
40 text-shadow: 0 0 40px rgba(168, 85, 247, 0.6);
41 }
42 .slot-label {
43 position: absolute;
44 bottom: 30%;
45 left: 50%;
46 transform: translateX(-50%);
47 font-family: "JetBrains Mono", monospace;
48 font-size: 22px;
49 color: var(--hg-dim);
50 letter-spacing: 0.4em;
51 text-transform: uppercase;
52 opacity: 0;
53 }
54 </style>
55 <div class="stage">
56 <div class="slot">
57 <span class="digit" data-target="5">0</span>
58 <span class="digit" data-target=".">0</span>
59 <span class="digit" data-target="5">0</span>
60 <span class="digit" data-target="x">0</span>
61 </div>
62 </div>
63 <div class="slot-label">FINAL VERSION</div>
64 <script>
65 window.__timelines = window.__timelines || {};
66 const tl = gsap.timeline({ paused: true });
67
68 const DIGITS = "0123456789";
69 const slotStates = [{ p: 0 }, { p: 0 }, { p: 0 }, { p: 0 }];
70 slotStates.forEach((state, idx) => {
71 tl.to(
72 state,
73 {
74 p: 1,
75 duration: 1.0,
76 delay: idx * 0.08,
77 ease: "power3.out",
78 onUpdate: function () {
79 const spans = document.querySelectorAll(".slot .digit");
80 const span = spans[idx];
81 if (!span) return;
82 const target = span.getAttribute("data-target");
83 if (state.p >= 0.85) {
84 span.textContent = target;
85 span.style.color = "var(--hg-violet-2)";
86 } else {
87 const tick = Math.floor(state.p * 80 + idx * 3);
88 span.textContent = DIGITS.charAt(tick % 10);
89 }
90 },
91 },
92 0.15,
93 );
94 });
95 tl.to(".slot-label", { opacity: 1, duration: 0.5, ease: "power2.out" }, 1.2);
96
97 window.__timelines["slot-machine-reveal"] = tl;
98 </script>
99 </div>
100</template>