Rotating Gallery :: Lab :: Carter Ogunsola

A ring of image plates riding pure translateZ depth under a deep perspective. Drag, scroll, or let it drift, the front card live and in color. Hit the grid button and the same cards re-parent into a grid via GSAP Flip.

Dependencies

GSAPCore :: ticker + Flip

A ring of images you can also lay flat

Ten plates hang in a tilted circle, close enough to read as a carousel. Spin it with a drag or the wheel, or leave it and it drifts on its own. Whichever card is nearest the front is the live one: it warms from gray to full color while the rest stay quiet. Hit the grid button and the ring flattens, the same cards you were just spinning sliding into their slots.

Depth, not rotation

Nothing here rotates. Each card rides a circle on pure translateZ under a deep perspective (4000), so it never billboards. No rotateY, no cards turning edge-on and blinking out. They stay flat and upright, and the only thing that changes is how near each one is, which the perspective reads as size. The front card sits at max Z, and the active index is just round(-angle / slice). Because nothing ever tips far enough to overlap wrong, the paint order can stay fixed and never pop, so there’s no per-frame z-index sorting to pay for.

The same cards, re-parented

The grid isn’t a second gallery fading in over the first. When you switch, the actual card nodes re-parent from the ring into a grid container, and GSAP Flip animates each one from where it was to where it lands. Shared elements, no ghosts, no crossfade. The card you were looking at is the card that flies to its slot. Going back, the ring re-orients first so the card you’re on in the grid flies straight to the front. The stagger is geometric, not DOM-order. Each card’s delay is its distance from that anchor (grid cells one way, ring steps the other), so the morph ripples outward from your card instead of sweeping index 0 to 9. And a toggle mid-morph doesn’t wait its turn; the running flips are killed and the next capture picks every card up exactly where it is.

The feel

Left alone it drifts at 4°/s, slow enough to feel idle rather than motorized. A flick doesn’t fight that drift, it blends into it, the momentum bleeding off (decay 1.3) until the drift takes back over. Dragging follows your pointer at λ8, laggy enough to carry some weight. The ring-to-grid morph runs back.inOut(2.2) over 1.4s, overshooting a hair at both ends so the cards arrive with a small snap instead of gliding to a dead stop.

Grayscale is the tell for “not active”: every card is desaturated until it reaches the front, then blooms to color on expo.out. On a monochrome site, that bloom is the one place the media gets to be loud.

Make it yours

AUTO_SPEED — the idle drift, in degrees per second. Zero it and the gallery only moves when you touch it.
PERSPECTIVE — smaller numbers exaggerate the depth and fan the cards harder; 4000 is deliberately gentle.
FLIP_EASE / FLIP_DUR — the ring↔grid morph. Drop the back overshoot for a calmer landing.

Setup

1
<!-- GSAP (from CDN) -->
2
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
3
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/Flip.min.js"></script>
4
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/CustomEase.min.js"></script>
5

6
<!-- Site tokens the styles use — swap freely -->
7
<style>
8
  :root {
9
    --font-sans: "Oracle", "Geist", system-ui, sans-serif;
10
    --font-mono: "PP Neue Montreal Mono", "Geist Mono", ui-monospace, monospace;
11
    --fs-mono-meta: 0.75rem;
12
    --paper: #d6d6d5;
13
    --ink: #1e1e1e;
14
    --ink-muted: rgba(30, 30, 30, 0.7);
15
    --surface: #fdfcfb;
16
    --fill: rgba(30, 30, 30, 0.08);
17
    --card-solid: color-mix(in srgb, #1e1e1e 5%, #d6d6d5);
18
    --r-xs: 2px;
19
    --r-sm: 4px;
20
    --ease-out-quad: cubic-bezier(0.5, 1, 0.89, 1);
21
  }
22
</style>
23

24
<!-- Sized stage — the script fills it -->
25
<div class="stage" style="position: relative; height: 100vh; background: var(--paper);"></div>
26

27
<!-- Then the Script, inside <script> (CodePen's JS panel does this for you) -->

Style

1
.rg {
2
  position: absolute;
3
  inset: 0;
4
  overflow: hidden;
5
  font-family: var(--font-sans);
6
  --rg-card-w: 12rem;
7
  --rg-ratio: 1.08;
8
  touch-action: none;
9
  -webkit-user-select: none;
10
  user-select: none;
11
  outline: none;
12
}
13

14
.rg__stage {
15
  position: absolute;
16
  inset: 0;
17
  cursor: grab;
18
  isolation: isolate;
19
}
20

21
.rg.is-dragging .rg__stage {
22
  cursor: grabbing;
23
}
24

25
.rg[data-view="grid"] .rg__stage {
26
  cursor: default;
27
}
28

29
.rg__carousel {
30
  position: absolute;
31
  left: 50%;
32
  top: 49%;
33
  transform: translate(-50%,-50%);
34
}
35

36
.rg__item {
37
  position: absolute;
38
  left: 0;
39
  top: 0;
40
  will-change: transform;
41
}
42

43
.rg__flip {
44
  display: block;
45
  width: var(--rg-card-w);
46
  height: calc(var(--rg-card-w)*var(--rg-ratio));
47
  border-radius: var(--r-xs);
48
  overflow: hidden;
49
  background: var(--card-solid);
50
  text-decoration: none;
51
}
52

53
.rg__img {
54
  width: 100%;
55
  height: 100%;
56
  object-fit: cover;
57
  display: block;
58
  transform: scale(1);
59
  -webkit-user-drag: none;
60
  user-select: none;
61
  pointer-events: none;
62
}
63

64
.rg__grid {
65
  position: absolute;
66
  inset: 0;
67
  display: grid;
68
  gap: clamp(.5rem,1.4vw,1.1rem);
69
  padding: clamp(1rem,4vw,3.5rem);
70
  align-content: center;
71
  grid-template-columns: repeat(5,1fr);
72
  pointer-events: none;
73
  opacity: 0;
74
}
75

76
.rg[data-view="grid"] .rg__grid {
77
  pointer-events: auto;
78
  opacity: 1;
79
}
80

81
.rg__slot {
82
  position: relative;
83
  aspect-ratio: 1 / var(--rg-ratio);
84
}
85

86
.rg__grid .rg__flip {
87
  width: 100%;
88
  height: 100%;
89
}
90

91
.rg__hud {
92
  position: absolute;
93
  inset-inline: 0;
94
  bottom: 0;
95
  z-index: 5;
96
  pointer-events: none;
97
  display: flex;
98
  align-items: flex-end;
99
  justify-content: space-between;
100
  padding: clamp(1rem,2.5vw,2rem);
101
  gap: 1rem;
102
}
103

104
.rg__meta {
105
  display: flex;
106
  align-items: baseline;
107
  gap: .7rem;
108
  color: var(--ink);
109
}
110

111
.rg__odo {
112
  display: inline-flex;
113
  font-family: var(--font-mono);
114
  font-variant-numeric: tabular-nums;
115
  font-size: clamp(1.6rem,3vw,2.6rem);
116
  line-height: 1;
117
  letter-spacing: -.02em;
118
}
119

120
.rg__odo-col {
121
  display: block;
122
  height: 1em;
123
  overflow: hidden;
124
}
125

126
.rg__odo-strip {
127
  display: block;
128
  will-change: transform;
129
}
130

131
.rg__odo-num {
132
  display: block;
133
  height: 1em;
134
  line-height: 1;
135
  text-align: center;
136
}
137

138
.rg__name {
139
  font-family: var(--font-mono);
140
  text-transform: uppercase;
141
  letter-spacing: .08em;
142
  font-size: var(--fs-mono-meta,.75rem);
143
  color: var(--ink-muted);
144
  overflow: hidden;
145
  height: 1.1em;
146
}
147

148
.rg__name-strip {
149
  display: block;
150
  will-change: transform;
151
}
152

153
.rg__name-item {
154
  display: block;
155
  height: 1.1em;
156
  line-height: 1.1;
157
  white-space: nowrap;
158
}
159

160
.rg__views {
161
  display: inline-flex;
162
  gap: .25rem;
163
  pointer-events: auto;
164
  padding: .2rem;
165
  border-radius: var(--r-sm);
166
  background: var(--fill);
167
}
168

169
.rg__view-btn {
170
  display: grid;
171
  place-items: center;
172
  width: 2rem;
173
  height: 2rem;
174
  border: 0;
175
  padding: 0;
176
  border-radius: calc(var(--r-sm) - .15rem);
177
  background: transparent;
178
  color: var(--ink-muted);
179
  cursor: pointer;
180
  transition: background-color .25s var(--ease-out-quad),color .25s var(--ease-out-quad),scale .15s var(--ease-out-quad);
181
}
182

183
.rg__view-btn svg {
184
  width: 1rem;
185
  height: 1rem;
186
  fill: currentColor;
187
}
188

189
.rg__view-btn:hover {
190
  color: var(--ink);
191
}
192

193
.rg__view-btn:active {
194
  scale: .96;
195
}
196

197
.rg__view-btn[data-active="true"] {
198
  background: var(--surface);
199
  color: var(--ink);
200
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
201
}
202

203
.rg__view-btn:focus-visible {
204
  outline: 2px solid var(--ink);
205
  outline-offset: 2px;
206
}
207

208
@media (max-width:47.99rem) {
209
  .rg__grid {
210
    grid-template-columns: repeat(2,1fr);
211
  }
212
}

Script

1
const asset = (key) => `https://assets.carterogunsola.com/${key.replace(/^\/+/, "")}`;
2
const PLATES = [
3
  [1, "DRIFT"],
4
  [4, "FOLD"],
5
  [7, "BLOOM"],
6
  [10, "STATIC"],
7
  [13, "EMBER"],
8
  [16, "TIDE"],
9
  [19, "GRAIN"],
10
  [22, "PRISM"],
11
  [25, "HUSK"],
12
  [28, "VAPOR"]
13
];
14
const ITEMS = PLATES.map(([n, title]) => ({
15
  src: asset(`cdn-cgi/image/width=640,quality=86,format=auto/dts/unwrapped/DTS_Unwrapped_by_FRANCO_DUPUY_${n}.jpg`),
16
  title
17
}));
18
const N = ITEMS.length;
19
const DEG = Math.PI / 180;
20
const clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v));
21
const mod = (i, n) => (i % n + n) % n;
22
const damp = (cur, target, lambda, dt) => cur + (target - cur) * (1 - Math.exp(-lambda * dt));
23
const SLICE = 360 / N;
24
const PHASE = 180;
25
const MOMENTUM_DECAY = 1.3;
26
const DRAG_SCALE = 0.2;
27
const SCROLL_SCALE = 0.22;
28
const LOCK_PX = 5;
29
const FLIP_DUR = 1.4;
30
const IMG_EASE = [0.16, 1, 0.3, 1];
31
const DIGIT_DAMP = 8;
32
let rgEaseSeq = 0;
33
const toEase = (id, b) => CustomEase.create(id, `M0,0 C${b[0]},${b[1]} ${b[2]},${b[3]} 1,1`);
34
const EASES = {
35
  glide: "power3.inOut",
36
  snap: "back.inOut(1.4)",
37
  spring: "back.inOut(2.2)"
38

39
};
40
const DEFAULTS = {
41
  drift: 4,
42

43
  weight: 8,
44

45
  perspective: 4e3,
46

47
  morph: "spring",
48
  imgEase: IMG_EASE
49

50
};
51
const STYLE_ID = "exp-rg-style";
52
const CSS = `
53
.rg {
54
  position: absolute;
55
  inset: 0;
56
  overflow: hidden;
57
  font-family: var(--font-sans);
58
  --rg-card-w: 12rem;
59
  --rg-ratio: 1.08;
60
  touch-action: none;
61
  -webkit-user-select: none;
62
  user-select: none;
63
  outline: none;
64
}
65

66
.rg__stage {
67
  position: absolute;
68
  inset: 0;
69
  cursor: grab;
70
  isolation: isolate;
71
}
72

73
.rg.is-dragging .rg__stage {
74
  cursor: grabbing;
75
}
76

77
.rg[data-view="grid"] .rg__stage {
78
  cursor: default;
79
}
80

81
.rg__carousel {
82
  position: absolute;
83
  left: 50%;
84
  top: 49%;
85
  transform: translate(-50%,-50%);
86
}
87

88
.rg__item {
89
  position: absolute;
90
  left: 0;
91
  top: 0;
92
  will-change: transform;
93
}
94

95
.rg__flip {
96
  display: block;
97
  width: var(--rg-card-w);
98
  height: calc(var(--rg-card-w)*var(--rg-ratio));
99
  border-radius: var(--r-xs);
100
  overflow: hidden;
101
  background: var(--card-solid);
102
  text-decoration: none;
103
}
104

105
.rg__img {
106
  width: 100%;
107
  height: 100%;
108
  object-fit: cover;
109
  display: block;
110
  transform: scale(1);
111
  -webkit-user-drag: none;
112
  user-select: none;
113
  pointer-events: none;
114
}
115

116
.rg__grid {
117
  position: absolute;
118
  inset: 0;
119
  display: grid;
120
  gap: clamp(.5rem,1.4vw,1.1rem);
121
  padding: clamp(1rem,4vw,3.5rem);
122
  align-content: center;
123
  grid-template-columns: repeat(5,1fr);
124
  pointer-events: none;
125
  opacity: 0;
126
}
127

128
.rg[data-view="grid"] .rg__grid {
129
  pointer-events: auto;
130
  opacity: 1;
131
}
132

133
.rg__slot {
134
  position: relative;
135
  aspect-ratio: 1 / var(--rg-ratio);
136
}
137

138
.rg__grid .rg__flip {
139
  width: 100%;
140
  height: 100%;
141
}
142

143
.rg__hud {
144
  position: absolute;
145
  inset-inline: 0;
146
  bottom: 0;
147
  z-index: 5;
148
  pointer-events: none;
149
  display: flex;
150
  align-items: flex-end;
151
  justify-content: space-between;
152
  padding: clamp(1rem,2.5vw,2rem);
153
  gap: 1rem;
154
}
155

156
.rg__meta {
157
  display: flex;
158
  align-items: baseline;
159
  gap: .7rem;
160
  color: var(--ink);
161
}
162

163
.rg__odo {
164
  display: inline-flex;
165
  font-family: var(--font-mono);
166
  font-variant-numeric: tabular-nums;
167
  font-size: clamp(1.6rem,3vw,2.6rem);
168
  line-height: 1;
169
  letter-spacing: -.02em;
170
}
171

172
.rg__odo-col {
173
  display: block;
174
  height: 1em;
175
  overflow: hidden;
176
}
177

178
.rg__odo-strip {
179
  display: block;
180
  will-change: transform;
181
}
182

183
.rg__odo-num {
184
  display: block;
185
  height: 1em;
186
  line-height: 1;
187
  text-align: center;
188
}
189

190
.rg__name {
191
  font-family: var(--font-mono);
192
  text-transform: uppercase;
193
  letter-spacing: .08em;
194
  font-size: var(--fs-mono-meta,.75rem);
195
  color: var(--ink-muted);
196
  overflow: hidden;
197
  height: 1.1em;
198
}
199

200
.rg__name-strip {
201
  display: block;
202
  will-change: transform;
203
}
204

205
.rg__name-item {
206
  display: block;
207
  height: 1.1em;
208
  line-height: 1.1;
209
  white-space: nowrap;
210
}
211

212
.rg__views {
213
  display: inline-flex;
214
  gap: .25rem;
215
  pointer-events: auto;
216
  padding: .2rem;
217
  border-radius: var(--r-sm);
218
  background: var(--fill);
219
}
220

221
.rg__view-btn {
222
  display: grid;
223
  place-items: center;
224
  width: 2rem;
225
  height: 2rem;
226
  border: 0;
227
  padding: 0;
228
  border-radius: calc(var(--r-sm) - .15rem);
229
  background: transparent;
230
  color: var(--ink-muted);
231
  cursor: pointer;
232
  transition: background-color .25s var(--ease-out-quad),color .25s var(--ease-out-quad),scale .15s var(--ease-out-quad);
233
}
234

235
.rg__view-btn svg {
236
  width: 1rem;
237
  height: 1rem;
238
  fill: currentColor;
239
}
240

241
.rg__view-btn:hover {
242
  color: var(--ink);
243
}
244

245
.rg__view-btn:active {
246
  scale: .96;
247
}
248

249
.rg__view-btn[data-active="true"] {
250
  background: var(--surface);
251
  color: var(--ink);
252
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
253
}
254

255
.rg__view-btn:focus-visible {
256
  outline: 2px solid var(--ink);
257
  outline-offset: 2px;
258
}
259

260
@media (max-width:47.99rem) {
261
  .rg__grid {
262
    grid-template-columns: repeat(2,1fr);
263
  }
264
}
265
`;
266
function injectStyle() {
267
  if (document.getElementById(STYLE_ID)) return;
268
  const el = document.createElement("style");
269
  el.id = STYLE_ID;
270
  el.textContent = CSS;
271
  document.head.appendChild(el);
272
}
273
const carouselIcon = `<svg viewBox="0 0 16 16" aria-hidden="true"><rect x="5.333" width="5.333" height="5.333"/><rect x="5.333" y="10.667" width="5.333" height="5.333"/><rect x="10.667" y="5.333" width="5.333" height="5.333"/><rect y="5.333" width="5.333" height="5.333"/></svg>`;
274
const gridIcon = `<svg viewBox="0 0 16 16" aria-hidden="true"><rect x="0.25" y="0.75" width="5.333" height="5.333"/><rect x="10.583" y="0.75" width="5.333" height="5.333"/><rect x="0.25" y="10" width="5.333" height="5.333"/><rect x="10.583" y="10" width="5.333" height="5.333"/></svg>`;
275
const experiment = {
276
  mount(root) {
277
    injectStyle();
278
    const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
279
    const P = { ...DEFAULTS };
280
    const easeId = `rgImg-${rgEaseSeq++}`;
281
    let imgEase = toEase(easeId, P.imgEase);
282
    const rg = document.createElement("div");
283
    rg.className = "rg";
284
    rg.tabIndex = 0;
285
    rg.dataset.view = "carousel";
286
    const stage = document.createElement("div");
287
    stage.className = "rg__stage";
288
    const carousel = document.createElement("div");
289
    carousel.className = "rg__carousel";
290
    const grid = document.createElement("div");
291
    grid.className = "rg__grid";
292
    const flips = [];
293
    const imgs = [];
294
    const items = [];
295
    const slots = [];
296
    ITEMS.forEach((item, i) => {
297
      const it = document.createElement("div");
298
      it.className = "rg__item";
299
      it.style.zIndex = String(Math.round(500 + Math.cos(i * SLICE * DEG) * 100));
300
      const flip = document.createElement("div");
301
      flip.className = "rg__flip";
302
      flip.dataset.i = String(i);
303
      const img = document.createElement("img");
304
      img.className = "rg__img";
305
      img.src = item.src;
306
      img.alt = item.title;
307
      img.loading = "eager";
308
      img.decoding = "async";
309
      flip.appendChild(img);
310
      it.appendChild(flip);
311
      carousel.appendChild(it);
312
      const slot = document.createElement("div");
313
      slot.className = "rg__slot";
314
      slot.style.zIndex = it.style.zIndex;
315
      grid.appendChild(slot);
316
      flips.push(flip);
317
      imgs.push(img);
318
      items.push(it);
319
      slots.push(slot);
320
    });
321
    const hud = document.createElement("div");
322
    hud.className = "rg__hud";
323
    const meta = document.createElement("div");
324
    meta.className = "rg__meta";
325
    const odo = document.createElement("div");
326
    odo.className = "rg__odo";
327
    odo.setAttribute("aria-hidden", "true");
328
    const digit = () => `<span class="rg__odo-col"><span class="rg__odo-strip">${[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((n) => `<span class="rg__odo-num">${n}</span>`).join("")}</span></span>`;
329
    odo.innerHTML = digit() + digit();
330
    const strips = [...odo.querySelectorAll(".rg__odo-strip")];
331
    const name = document.createElement("div");
332
    name.className = "rg__name";
333
    name.innerHTML = `<span class="rg__name-strip">${ITEMS.map(
334
      (it) => `<span class="rg__name-item">${it.title}</span>`
335
    ).join("")}</span>`;
336
    const nameStrip = name.querySelector(".rg__name-strip");
337
    meta.append(odo, name);
338
    const views = document.createElement("div");
339
    views.className = "rg__views";
340
    views.setAttribute("role", "group");
341
    views.setAttribute("aria-label", "View");
342
    const carBtn = document.createElement("button");
343
    carBtn.type = "button";
344
    carBtn.className = "rg__view-btn";
345
    carBtn.dataset.view = "carousel";
346
    carBtn.dataset.active = "true";
347
    carBtn.setAttribute("aria-label", "Carousel view");
348
    carBtn.innerHTML = carouselIcon;
349
    const gridBtn = document.createElement("button");
350
    gridBtn.type = "button";
351
    gridBtn.className = "rg__view-btn";
352
    gridBtn.dataset.view = "grid";
353
    gridBtn.dataset.active = "false";
354
    gridBtn.setAttribute("aria-label", "Grid view");
355
    gridBtn.innerHTML = gridIcon;
356
    views.append(carBtn, gridBtn);
357
    hud.append(meta, views);
358
    stage.append(carousel, grid);
359
    rg.append(stage, hud);
360
    root.appendChild(rg);
361
    let center = 300;
362
    let radius = 250;
363
    let depth = 300;
364
    const measure = () => {
365
      const w = stage.clientWidth;
366
      const h = stage.clientHeight;
367
      const side = Math.min(w, h);
368
      center = side / 2;
369
      radius = clamp(Math.min(h * 0.26, w * 0.2), 140, 210);
370
      depth = radius * 1.2;
371
      const cardW = radius * 0.82;
372
      rg.style.setProperty("--rg-card-w", `${cardW}px`);
373
      carousel.style.width = carousel.style.height = `${side}px`;
374
      carousel.style.perspective = `${P.perspective}px`;
375
    };
376
    let angle = 0;
377
    let target = 0;
378
    let momentum = P.drift;
379
    let dir = 1;
380
    let dragging = false;
381
    let view = "carousel";
382
    let flipping = false;
383
    let activeIdx = -1;
384
    let hoverIdx = -1;
385
    const digitY = [0, 0];
386
    let dirty = true;
387
    const layout = () => {
388
      for (let i = 0; i < N; i++) {
389
        const a = (i * SLICE + angle + PHASE) * DEG;
390
        const x = center + radius * Math.sin(a);
391
        const y = center - radius * Math.cos(a);
392
        const z = -depth * Math.cos(a);
393
        items[i].style.transform = `translate3d(${x}px, ${y}px, ${z}px) translate(-50%, -50%)`;
394
      }
395
    };
396
    const displayIdx = () => hoverIdx >= 0 ? hoverIdx : activeIdx;
397
    const setImages = () => {
398
      const active = displayIdx();
399
      for (let i = 0; i < N; i++) {
400
        gsap.to(imgs[i], {
401
          scale: i === active ? 1.06 : 1,
402

403
          duration: reduced ? 0 : 1,
404
          ease: imgEase,
405
          overwrite: true
406
        });
407
      }
408
    };
409
    const setMeta = (idx) => {
410
      const oneBased = idx + 1;
411
      const tens = Math.floor(oneBased / 10);
412
      const ones = oneBased % 10;
413
      digitY[0] = -tens;
414
      digitY[1] = -ones;
415
      nameStrip.style.transform = `translateY(${-idx * 1.1}em)`;
416
    };
417
    const setView = (next) => {
418
      if (next === view) return;
419
      view = next;
420
      rg.dataset.view = next;
421
      carBtn.dataset.active = String(next === "carousel");
422
      gridBtn.dataset.active = String(next === "grid");
423
      const lead = displayIdx();
424
      if (next === "carousel") {
425
        const want = -lead * SLICE;
426
        angle += ((want - angle) % 360 + 540) % 360 - 180;
427
        target = angle;
428
        momentum = P.drift * dir;
429
        if (activeIdx !== lead) {
430
          activeIdx = lead;
431
          setMeta(lead);
432
          setImages();
433
        }
434
        layout();
435
      }
436
      if (reduced) {
437
        flips.forEach((f, i) => (next === "grid" ? slots[i] : items[i]).appendChild(f));
438
        flipping = false;
439
        return;
440
      }
441
      Flip.killFlipsOf(flips);
442
      flipping = true;
443
      const state = Flip.getState(flips, { props: "filter" });
444
      flips.forEach((f, i) => (next === "grid" ? slots[i] : items[i]).appendChild(f));
445
      const each = next === "grid" ? 0.015 : 0.02;
446
      const cols = 5;
447
      Flip.from(state, {
448
        duration: FLIP_DUR,
449
        ease: EASES[P.morph],
450
        absolute: true,
451
        nested: true,
452
        scale: true,
453
        prune: true,
454
        stagger: (i) => {
455
          const d = next === "grid" ? Math.max(
456
            Math.abs(i % cols - lead % cols),
457
            Math.abs(Math.floor(i / cols) - Math.floor(lead / cols))
458
          ) : Math.min(mod(i - lead, N), mod(lead - i, N));
459
          return d * each;
460
        },
461
        onComplete: () => flipping = false
462
      });
463
    };
464
    carBtn.addEventListener("click", () => setView("carousel"));
465
    gridBtn.addEventListener("click", () => setView("grid"));
466
    const canHover = window.matchMedia("(hover: hover) and (pointer: fine)").matches;
467
    if (canHover) {
468
      flips.forEach((flip, i) => {
469
        flip.addEventListener("pointerenter", () => {
470
          if (hoverIdx === i) return;
471
          hoverIdx = i;
472
          setImages();
473
          setMeta(i);
474
        });
475
        flip.addEventListener("pointerleave", () => {
476
          if (hoverIdx !== i) return;
477
          hoverIdx = -1;
478
          setImages();
479
          setMeta(activeIdx);
480
        });
481
      });
482
    }
483
    const tick = (_t, dtMs) => {
484
      const dt = Math.min(dtMs, 64) / 1e3 || 0.016;
485
      if (view === "carousel" && !flipping) {
486
        if (dragging) {
487
          angle = damp(angle, target, P.weight, dt);
488
          dirty = true;
489
        } else if (!reduced) {
490
          momentum = damp(momentum, P.drift * dir, MOMENTUM_DECAY, dt);
491
          angle += momentum * dt;
492
          dirty = true;
493
        }
494
        const idx = mod(Math.round(-angle / SLICE), N);
495
        if (idx !== activeIdx) {
496
          activeIdx = idx;
497
          if (hoverIdx < 0) {
498
            setImages();
499
            setMeta(idx);
500
          }
501
        }
502
      }
503
      for (let d = 0; d < 2; d++) {
504
        const cur = Number(strips[d].dataset.y ?? "0");
505
        const next = reduced ? digitY[d] : damp(cur, digitY[d], DIGIT_DAMP, 1 / 60);
506
        if (Math.abs(next - cur) > 2e-4) {
507
          strips[d].dataset.y = String(next);
508
          strips[d].style.transform = `translateY(${next}em)`;
509
          dirty = true;
510
        }
511
      }
512
      if (view === "carousel" && dirty) {
513
        dirty = false;
514
        layout();
515
      }
516
    };
517
    const ac = new AbortController();
518
    const { signal } = ac;
519
    let startX = 0;
520
    let startY = 0;
521
    let pressAngle = 0;
522
    let axis = null;
523
    let lastDelta = 0;
524
    let lastMoveT = 0;
525
    let vel = 0;
526
    stage.addEventListener(
527
      "pointerdown",
528
      (e) => {
529
        if (view !== "carousel" || flipping) return;
530
        if (e.target.closest(".rg__views")) return;
531
        dragging = true;
532
        axis = null;
533
        startX = e.clientX;
534
        startY = e.clientY;
535
        pressAngle = angle;
536
        target = angle;
537
        lastDelta = 0;
538
        vel = 0;
539
        lastMoveT = performance.now();
540
        rg.classList.add("is-dragging");
541
        stage.setPointerCapture?.(e.pointerId);
542
      },
543
      { signal }
544
    );
545
    window.addEventListener(
546
      "pointermove",
547
      (e) => {
548
        if (!dragging) return;
549
        const dx = e.clientX - startX;
550
        const dy = e.clientY - startY;
551
        if (!axis && Math.hypot(dx, dy) > LOCK_PX) axis = Math.abs(dx) > Math.abs(dy) ? "x" : "y";
552
        if (!axis) return;
553
        const d = axis === "x" ? dx : dy;
554
        target = pressAngle + d * DRAG_SCALE;
555
        const now = performance.now();
556
        const mdt = Math.max(1, now - lastMoveT);
557
        vel = (d - lastDelta) * DRAG_SCALE / (mdt / 1e3);
558
        lastDelta = d;
559
        lastMoveT = now;
560
      },
561
      { signal }
562
    );
563
    const endDrag = () => {
564
      if (!dragging) return;
565
      dragging = false;
566
      rg.classList.remove("is-dragging");
567
      if (Math.abs(vel) > 1) {
568
        momentum = clamp(vel, -900, 900);
569
        dir = Math.sign(momentum) || dir;
570
      }
571
    };
572
    window.addEventListener("pointerup", endDrag, { signal });
573
    window.addEventListener("pointercancel", endDrag, { signal });
574
    stage.addEventListener(
575
      "wheel",
576
      (e) => {
577
        if (view !== "carousel" || flipping) return;
578
        e.preventDefault();
579
        dragging = true;
580
        target = (dragging ? target : angle) + e.deltaY * SCROLL_SCALE;
581
        dir = Math.sign(e.deltaY) || dir;
582
        clearTimeout(wheelIdle);
583
        wheelIdle = setTimeout(() => {
584
          dragging = false;
585
          momentum = clamp(e.deltaY * SCROLL_SCALE * 8, -900, 900);
586
        }, 90);
587
      },
588
      { passive: false, signal }
589
    );
590
    let wheelIdle;
591
    rg.addEventListener(
592
      "keydown",
593
      (e) => {
594
        if (e.key === "ArrowLeft") {
595
          e.preventDefault();
596
          target = angle - SLICE;
597
          angle = damp(angle, target, 1, 1);
598
          dragging = true;
599
          setTimeout(() => dragging = false, 60);
600
        } else if (e.key === "ArrowRight") {
601
          e.preventDefault();
602
          target = angle + SLICE;
603
          dragging = true;
604
          setTimeout(() => dragging = false, 60);
605
        } else if (e.key === "g" || e.key === "G") {
606
          setView(view === "grid" ? "carousel" : "grid");
607
        }
608
      },
609
      { signal }
610
    );
611
    measure();
612
    activeIdx = mod(Math.round(-angle / SLICE), N);
613
    setMeta(activeIdx);
614
    setImages();
615
    layout();
616
    const ro = new ResizeObserver(() => {
617
      measure();
618
      dirty = true;
619
    });
620
    ro.observe(stage);
621
    gsap.ticker.add(tick);
622
    if (!reduced) {
623
      gsap.set(flips, { clipPath: "inset(100%)", willChange: "clip-path" });
624
      gsap.set([meta, views], { opacity: 0, y: 26 });
625
      const tl = gsap.timeline({ delay: 0.1 });
626
      tl.to(flips, {
627
        clipPath: "inset(0%)",
628
        duration: 1.5,
629
        stagger: 0.07,
630
        ease: "expo.out",
631
        clearProps: "clipPath,willChange"
632
      });
633
      tl.to(meta, { opacity: 1, y: 0, duration: 1.1, ease: "expo.out" }, "<0.1");
634
      tl.to(views, { opacity: 1, y: 0, duration: 1.2, ease: "expo.out" }, "<0.35");
635
    }
636
    const set = (key, value) => {
637
      if (key === "morph") {
638
        P.morph = String(value);
639
      } else if (key === "imgEase") {
640
        if (Array.isArray(value) && value.length === 4) {
641
          P.imgEase = value;
642
          imgEase = toEase(easeId, P.imgEase);
643
        }
644
      } else if (key === "perspective") {
645
        P.perspective = Number(value);
646
        carousel.style.perspective = `${P.perspective}px`;
647
      } else if (key in P) {
648
        P[key] = Number(value);
649
      }
650
    };
651
    const destroy = () => {
652
      ac.abort();
653
      ro.disconnect();
654
      gsap.ticker.remove(tick);
655
      clearTimeout(wheelIdle);
656
      gsap.killTweensOf([...imgs, ...items, ...flips, meta, views, rg]);
657
      rg.remove();
658
    };
659
    return { destroy, set };
660
  }
661
};
662
experiment.mount(document.querySelector(".stage"));

Rotating Gallery

Gallery

Experiment coming soonLoading experiment

Rotating Gallery — Lab experiment