Setting the file. One moment. Gsap Min
(opens in a new tab)
references/motion-primitives/crash-zoom-in/scene.html
HTML·120 lines·3 KB
7 --hg-bg: #0a0a0f;
8 --hg-fg: #f5f5fa;
9 --hg-dim: #6b6b78;
10 }
11 * {
12 margin: 0;
13 padding: 0;
14 box-sizing: border-box;
15 }
16 .zoom-stage {
17 position: absolute;
18 inset: 0;
19 display: flex;
20 align-items: center;
21 justify-content: center;
22 will-change: transform;
23 }
24 .radial-bg {
25 position: absolute;
26 inset: 0;
27 background: radial-gradient(
28 circle at center,
29 rgba(168, 85, 247, 0.18) 0%,
30 transparent 35%,
31 rgba(0, 0, 0, 0.6) 80%
32 );
33 opacity: 0;
34 will-change: opacity, transform;
35 }
36 .speed-lines {
37 position: absolute;
38 inset: 0;
39 background: repeating-radial-gradient(
40 circle at 50% 50%,
41 transparent 0px,
42 transparent 6px,
43 rgba(255, 255, 255, 0.08) 7px,
44 transparent 8px
45 );
46 opacity: 0;
47 will-change: opacity;
48 mix-blend-mode: screen;
49 }
50 .hero {
51 font-weight: 900;
52 font-size: 360px;
53 letter-spacing: -0.05em;
54 color: var(--hg-fg);
55 white-space: nowrap;
56 will-change: transform, filter;
57 }
58 </style>
59 <div class="radial-bg"></div>
60 <div class="speed-lines"></div>
61 <div class="zoom-stage"><div class="hero">CRASH</div></div>
62 <script>
63 window.__timelines = window.__timelines || {};
64 const tl = gsap.timeline({ paused: true });
65
66 // Hold black for tension
67 tl.set(".hero", { scale: 0.03, filter: "blur(20px)", opacity: 0 }, 0);
68
69 const CRASH = 0.45;
70
71 // The crash itself
72 tl.to(
73 ".hero",
74 { scale: 1.0, filter: "blur(0px)", opacity: 1, duration: 0.32, ease: "expo.in" },
75 CRASH,
76 );
77
78 // Background swoosh in same window
79 tl.fromTo(
80 ".radial-bg",
81 { opacity: 0, scale: 0.4 },
82 { opacity: 1, scale: 1, duration: 0.32, ease: "expo.in" },
83 CRASH,
84 );
85 tl.fromTo(
86 ".speed-lines",
87 { opacity: 0, scale: 0.2 },
88 { opacity: 1, scale: 1.4, duration: 0.32, ease: "expo.in" },
89 CRASH,
90 );
91
92 // Landing settle
93 const LAND = CRASH + 0.32;
94 tl.to(".hero", { scale: 0.96, duration: 0.08, ease: "power3.out" }, LAND);
95 tl.to(".hero", { scale: 1.0, duration: 0.5, ease: "elastic.out(1, 0.55)" }, LAND + 0.08);
96
97 // Quick landing shake
98 const sh = [9, -7, 5, -4, 2, -1];
99 sh.forEach((amp, i) => {
100 tl.to(
101 ".zoom-stage",
102 { x: amp, y: amp * 0.5 * (i % 2 ? -1 : 1), duration: 0.03, ease: "steps(1)" },
103 LAND + i * 0.03,
104 );
105 });
106 tl.to(
107 ".zoom-stage",
108 { x: 0, y: 0, duration: 0.1, ease: "power2.out" },
109 LAND + sh.length * 0.03,
110 );
111
112 // Speed lines fade
113 tl.to(".speed-lines", { opacity: 0, duration: 0.4, ease: "power2.out" }, LAND + 0.05);
114 // Radial settles
115 tl.to(".radial-bg", { opacity: 0.5, duration: 0.5, ease: "power2.out" }, LAND);
116
117 window.__timelines["crash-zoom-in"] = tl;
118 </script>
119 </div>
120</template>