Setting the file. One moment. Gsap Min
(opens in a new tab)
references/motion-primitives/chromatic-split/scene.html
HTML·111 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 .stack {
24 position: relative;
25 font-weight: 900;
26 font-size: 280px;
27 letter-spacing: -0.04em;
28 line-height: 0.95;
29 white-space: nowrap;
30 }
31 .layer {
32 position: absolute;
33 top: 0;
34 left: 0;
35 mix-blend-mode: screen;
36 will-change: transform;
37 }
38 .layer.r {
39 color: #ff2a4a;
40 }
41 .layer.g {
42 color: #2afff0;
43 }
44 .layer.b {
45 color: #b56dff;
46 }
47 .spacer {
48 color: transparent;
49 }
50 .scanlines {
51 position: absolute;
52 inset: 0;
53 background: repeating-linear-gradient(
54 0deg,
55 rgba(255, 255, 255, 0) 0px,
56 rgba(255, 255, 255, 0) 3px,
57 rgba(255, 255, 255, 0.04) 3px,
58 rgba(255, 255, 255, 0.04) 4px
59 );
60 opacity: 0;
61 pointer-events: none;
62 will-change: opacity;
63 }
64 </style>
65 <div class="stage">
66 <div class="stack">
67 <span class="spacer">GLITCH</span>
68 <span class="layer r">GLITCH</span>
69 <span class="layer g">GLITCH</span>
70 <span class="layer b">GLITCH</span>
71 </div>
72 </div>
73 <div class="scanlines"></div>
74 <script>
75 window.__timelines = window.__timelines || {};
76 const tl = gsap.timeline({ paused: true });
77
78 tl.fromTo(
79 ".stack",
80 { opacity: 0, scale: 0.95 },
81 { opacity: 1, scale: 1, duration: 0.25, ease: "power2.out" },
82 0.05,
83 );
84 tl.set(".layer.r", { x: -2 }, 0);
85 tl.set(".layer.g", { x: 2 }, 0);
86 tl.set(".layer.b", { x: 0 }, 0);
87 tl.to(".layer.r", { x: -14, duration: 0.06, ease: "steps(1)" }, 0.35);
88 tl.to(".layer.g", { x: 14, duration: 0.06, ease: "steps(1)" }, 0.35);
89 tl.to(".layer.r", { x: -4, duration: 0.06, ease: "steps(1)" }, 0.5);
90 tl.to(".layer.g", { x: 4, duration: 0.06, ease: "steps(1)" }, 0.5);
91 tl.to(".layer.r", { x: -22, duration: 0.04, ease: "steps(1)" }, 0.85);
92 tl.to(".layer.g", { x: 22, duration: 0.04, ease: "steps(1)" }, 0.85);
93 tl.to(".layer.b", { x: 6, duration: 0.04, ease: "steps(1)" }, 0.85);
94 tl.to(".layer.r", { x: -6, duration: 0.04, ease: "steps(1)" }, 0.97);
95 tl.to(".layer.g", { x: 6, duration: 0.04, ease: "steps(1)" }, 0.97);
96 tl.to(".layer.b", { x: -2, duration: 0.04, ease: "steps(1)" }, 0.97);
97 tl.to(".layer.r", { x: -3, duration: 0.4, ease: "power2.out" }, 1.2);
98 tl.to(".layer.g", { x: 3, duration: 0.4, ease: "power2.out" }, 1.2);
99 tl.to(".layer.b", { x: 0, duration: 0.4, ease: "power2.out" }, 1.2);
100 tl.fromTo(
101 ".scanlines",
102 { opacity: 0 },
103 { opacity: 0.85, duration: 0.06, ease: "steps(1)" },
104 0.35,
105 );
106 tl.to(".scanlines", { opacity: 0.25, duration: 0.5, ease: "power2.out" }, 1.0);
107
108 window.__timelines["chromatic-split"] = tl;
109 </script>
110 </div>
111</template>