Setting the file. One moment. Gsap Min
(opens in a new tab)
references/motion-primitives/liquid-morph/scene.html
HTML·96 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 .blob-wrap {
24 position: absolute;
25 inset: 0;
26 display: flex;
27 align-items: center;
28 justify-content: center;
29 }
30 .blob {
31 position: absolute;
32 width: 1100px;
33 height: 800px;
34 background: linear-gradient(135deg, #7c3aed 0%, #a855f7 60%, #d946ef 100%);
35 clip-path: polygon(
36 50% 5%,
37 65% 8%,
38 78% 16%,
39 88% 30%,
40 92% 50%,
41 88% 70%,
42 78% 84%,
43 65% 92%,
44 50% 95%,
45 35% 92%,
46 22% 84%,
47 12% 70%,
48 8% 50%,
49 12% 30%,
50 22% 16%,
51 35% 8%
52 );
53 will-change: clip-path, transform;
54 filter: blur(0.5px);
55 }
56 .hero {
57 font-family: "Playfair Display", serif;
58 font-style: italic;
59 font-weight: 900;
60 font-size: 280px;
61 letter-spacing: -0.04em;
62 color: var(--hg-fg);
63 white-space: nowrap;
64 position: relative;
65 z-index: 2;
66 mix-blend-mode: difference;
67 }
68 </style>
69 <div class="blob-wrap"><div class="blob"></div></div>
70 <div class="stage"><div class="hero">liquid</div></div>
71 <script>
72 window.__timelines = window.__timelines || {};
73 const tl = gsap.timeline({ paused: true });
74
75 const BLOB_A =
76 "polygon(50% 5%, 65% 8%, 78% 16%, 88% 30%, 92% 50%, 88% 70%, 78% 84%, 65% 92%, 50% 95%, 35% 92%, 22% 84%, 12% 70%, 8% 50%, 12% 30%, 22% 16%, 35% 8%)";
77 const BLOB_B =
78 "polygon(38% 10%, 58% 4%, 75% 14%, 90% 28%, 95% 46%, 86% 60%, 80% 78%, 62% 88%, 46% 94%, 30% 86%, 16% 74%, 6% 58%, 10% 40%, 20% 22%, 30% 14%, 38% 10%)";
79 const BLOB_C =
80 "polygon(46% 8%, 62% 10%, 80% 20%, 92% 36%, 90% 52%, 92% 70%, 76% 86%, 58% 90%, 44% 94%, 28% 88%, 14% 76%, 10% 60%, 12% 44%, 18% 26%, 30% 12%, 38% 8%)";
81
82 tl.set(".blob", { clipPath: BLOB_A, scale: 0.95 }, 0);
83 tl.to(".blob", { clipPath: BLOB_B, scale: 1.05, duration: 0.7, ease: "power2.inOut" }, 0.2);
84 tl.to(".blob", { clipPath: BLOB_C, scale: 1.0, duration: 0.7, ease: "power2.inOut" }, 0.9);
85 tl.fromTo(
86 ".hero",
87 { opacity: 0, y: 30 },
88 { opacity: 1, y: 0, duration: 0.6, ease: "power3.out" },
89 0.4,
90 );
91 tl.to(".blob", { rotation: 6, duration: 1.5, ease: "sine.inOut" }, 0.2);
92
93 window.__timelines["liquid-morph"] = tl;
94 </script>
95 </div>
96</template>