Setting the file. One moment. Gsap Min
(opens in a new tab)
references/motion-primitives/dolly-zoom/scene.html
HTML·102 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 .stage {
17 position: absolute;
18 inset: 0;
19 display: flex;
20 align-items: center;
21 justify-content: center;
22 }
23 .layers {
24 position: absolute;
25 inset: 0;
26 overflow: hidden;
27 }
28 .bg-far,
29 .bg-mid,
30 .bg-near {
31 position: absolute;
32 inset: 0;
33 will-change: transform, filter;
34 }
35 .bg-far {
36 background:
37 radial-gradient(2px 2px at 20% 30%, var(--hg-dim) 50%, transparent 51%),
38 radial-gradient(2px 2px at 70% 80%, var(--hg-dim) 50%, transparent 51%),
39 radial-gradient(1px 1px at 45% 60%, var(--hg-dim) 50%, transparent 51%),
40 radial-gradient(1px 1px at 85% 25%, var(--hg-dim) 50%, transparent 51%),
41 radial-gradient(2px 2px at 10% 75%, var(--hg-dim) 50%, transparent 51%),
42 radial-gradient(1px 1px at 60% 15%, var(--hg-dim) 50%, transparent 51%);
43 background-size: 400px 400px;
44 filter: blur(2px);
45 }
46 .bg-mid {
47 background:
48 linear-gradient(90deg, transparent 49.7%, rgba(168, 85, 247, 0.25) 50%, transparent 50.3%)
49 0 0 / 200px 200px,
50 linear-gradient(
51 180deg,
52 transparent 49.7%,
53 rgba(168, 85, 247, 0.15) 50%,
54 transparent 50.3%
55 )
56 0 0 / 200px 200px;
57 }
58 .bg-near {
59 background:
60 radial-gradient(circle at 15% 50%, rgba(168, 85, 247, 0.4) 0%, transparent 25%),
61 radial-gradient(circle at 85% 50%, rgba(124, 58, 237, 0.4) 0%, transparent 25%);
62 }
63 .subject {
64 position: relative;
65 z-index: 5;
66 font-family: "Playfair Display", serif;
67 font-style: italic;
68 font-weight: 900;
69 font-size: 180px;
70 letter-spacing: -0.02em;
71 }
72 </style>
73 <div class="layers">
74 <div class="bg-far"></div>
75 <div class="bg-mid"></div>
76 <div class="bg-near"></div>
77 </div>
78 <div class="stage"><div class="subject">subject.</div></div>
79 <script>
80 window.__timelines = window.__timelines || {};
81 const tl = gsap.timeline({ paused: true });
82
83 tl.fromTo(
84 ".bg-far",
85 { scale: 1, filter: "blur(2px)" },
86 { scale: 1.6, filter: "blur(4px)", duration: 1.8, ease: "power2.inOut" },
87 0.1,
88 );
89 tl.fromTo(".bg-mid", { scale: 1 }, { scale: 1.4, duration: 1.8, ease: "power2.inOut" }, 0.1);
90 tl.fromTo(".bg-near", { scale: 1 }, { scale: 1.2, duration: 1.8, ease: "power2.inOut" }, 0.1);
91 tl.fromTo(
92 ".subject",
93 { opacity: 0, scale: 1.1 },
94 { opacity: 1, scale: 1, duration: 0.6, ease: "power3.out" },
95 0.15,
96 );
97 tl.to(".layers", { skewY: -0.5, duration: 1.8, ease: "power2.inOut" }, 0.1);
98
99 window.__timelines["dolly-zoom"] = tl;
100 </script>
101 </div>
102</template>