← back to Dw Marketing Reels
Add commercial-collection flip-book (24 products, 8 vendors, Steve VO)
54152e7317d4105f46796f8dba190aedb1039028 · 2026-08-12 12:00:58 -0700 · Steve Abrams
Files touched
A flipbooks/commercial-collection/index.html
Diff
commit 54152e7317d4105f46796f8dba190aedb1039028
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Wed Aug 12 12:00:58 2026 -0700
Add commercial-collection flip-book (24 products, 8 vendors, Steve VO)
---
flipbooks/commercial-collection/index.html | 567 +++++++++++++++++++++++++++++
1 file changed, 567 insertions(+)
diff --git a/flipbooks/commercial-collection/index.html b/flipbooks/commercial-collection/index.html
new file mode 100644
index 0000000..3c6e2d4
--- /dev/null
+++ b/flipbooks/commercial-collection/index.html
@@ -0,0 +1,567 @@
+<!doctype html>
+<html lang="en" data-resolution="landscape">
+<head>
+<meta charset="UTF-8" />
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+<style>
+ :root { --ink:#1c1a17; --cream:#f4efe6; --paper:#fbf8f1; --gold:#b08d57; }
+ html,body { margin:0; padding:0; width:1920px; height:1080px; overflow:hidden;
+ background:radial-gradient(120% 120% at 50% 0%, #2a2622 0%, #14110e 72%);
+ font-family:"Helvetica Neue",system-ui,sans-serif; }
+ #main-composition { position:relative; width:1920px; height:1080px; overflow:hidden; }
+ .stage { position:absolute; inset:0; perspective:3000px; perspective-origin:50% 46%; }
+
+ /* LEFT verso: brand + room + name */
+ .verso { position:absolute; top:97px; left:192px; width:768px; height:886px;
+ background:var(--paper); border-radius:8px 2px 2px 8px; overflow:hidden;
+ box-shadow: inset -30px 0 46px rgba(0,0,0,.12), 0 34px 66px rgba(0,0,0,.5);
+ display:flex; flex-direction:column; }
+ .wordmark { flex:0 0 auto; text-align:center; padding:49px 0 27px; }
+ .wordmark .wm { font-family:Georgia, serif; font-size:55px; color:var(--ink); letter-spacing:.02em; line-height:1; }
+ .wordmark .wsub { margin-top:8px; font-size:18px; letter-spacing:.34em; text-transform:uppercase; color:var(--gold); }
+ .wordmark .wr { width:64px; height:2px; background:var(--gold); margin:25px auto 0; }
+ .roomstack { position:relative; flex:1 1 auto; margin:0 42px 42px; border-radius:4px; overflow:hidden; background:#e9e3d7; }
+ .room { position:absolute; inset:0; opacity:0; }
+ .room .rimg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
+ .room.fallback .rimg { transform:scale(1.4); filter:blur(3px) brightness(.82) saturate(1.05); }
+ .room .rtint { position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%); }
+ .room.fallback .rtint { background:linear-gradient(180deg, rgba(20,16,12,.30) 0%, rgba(20,16,12,.62) 100%); }
+ .rcap { position:absolute; left:0; right:0; bottom:0; padding:38px 42px; color:#fff; }
+ .rcap .rpat { font-family:Georgia, serif; font-size:48px; line-height:1.05; text-shadow:0 2px 14px rgba(0,0,0,.5); }
+ .rcap .rcol { margin-top:8px; font-size:20px; letter-spacing:.2em; text-transform:uppercase; color:#e7d8bd; }
+
+ /* RIGHT recto: page-turn stack of pattern swatches */
+ .leaf { position:absolute; top:97px; left:960px; width:768px; height:886px;
+ transform-origin:left center; transform-style:preserve-3d; will-change:transform; }
+ .leaf .face { position:absolute; inset:0; backface-visibility:hidden; overflow:hidden; border-radius:2px 8px 8px 2px;
+ background:var(--paper); box-shadow: 24px 28px 54px rgba(0,0,0,.42), inset 24px 0 42px rgba(0,0,0,.08); }
+ .leaf .back { transform:rotateY(180deg); background:linear-gradient(90deg,#efe9dc,#fbf8f1 22%);
+ box-shadow:-22px 28px 54px rgba(0,0,0,.36), inset -24px 0 42px rgba(0,0,0,.08); }
+ .leaf .art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
+ .leaf .shade { position:absolute; inset:0; opacity:0; pointer-events:none; background:linear-gradient(90deg, rgba(0,0,0,.42), rgba(0,0,0,0) 62%); }
+
+ /* cover + outro cards */
+ .card { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:var(--cream); }
+ .card .kicker { font-size:31px; letter-spacing:.44em; text-transform:uppercase; color:var(--gold); }
+ .card .big { font-family:Georgia, serif; font-size:134px; line-height:1.0; margin:22px 60px; }
+ .card .sub { font-size:35px; letter-spacing:.18em; text-transform:uppercase; color:#c9bfae; }
+ .card .rule { width:120px; height:2px; background:var(--gold); margin:32px 0; }
+ .card .url { margin-top:28px; font-size:31px; letter-spacing:.24em; text-transform:uppercase; color:var(--cream); }
+</style>
+</head>
+<body>
+ <div id="main-composition" data-composition-id="flipbook" data-width="1920" data-height="1080" data-start="0" data-duration="30.55">
+
+ <div class="card" id="cover">
+ <div class="kicker">Designer Wallcoverings presents</div>
+ <div class="big">Commercial & Contract</div>
+ <div class="rule"></div>
+ <div class="sub">The Commercial Edit</div>
+ </div>
+
+ <div class="stage" id="stage">
+ <div class="verso">
+ <div class="wordmark"><div class="wm">Designer Wallcoverings</div><div class="wsub">est. lookbook</div><div class="wr"></div></div>
+ <div class="roomstack">
+ <div class="room fallback" id="room0">
+ <img class="rimg" src="assets/room/r0.jpg" alt="Linsey, Beige room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Linsey, Beige</div><div class="rcol">Commercial & Contract · Koroseal</div></div>
+ </div>
+ <div class="room fallback" id="room1">
+ <img class="rimg" src="assets/room/r1.jpg" alt="Renzu Pink room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Renzu Pink</div><div class="rcol">Commercial & Contract · Koroseal</div></div>
+ </div>
+ <div class="room fallback" id="room2">
+ <img class="rimg" src="assets/room/r2.jpg" alt="Silken One, Gold room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Silken One, Gold</div><div class="rcol">Commercial & Contract · Koroseal</div></div>
+ </div>
+ <div class="room fallback" id="room3">
+ <img class="rimg" src="assets/room/r3.jpg" alt="Corragatio Vinyl room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Corragatio Vinyl</div><div class="rcol">Commercial & Contract · Hollywood Wallcoverings</div></div>
+ </div>
+ <div class="room fallback" id="room4">
+ <img class="rimg" src="assets/room/r4.jpg" alt="Olney Type II room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Olney Type II</div><div class="rcol">Commercial & Contract · Hollywood Wallcoverings</div></div>
+ </div>
+ <div class="room fallback" id="room5">
+ <img class="rimg" src="assets/room/r5.jpg" alt="Rustic Glam Vinyl room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Rustic Glam Vinyl</div><div class="rcol">Commercial & Contract · Hollywood Wallcoverings</div></div>
+ </div>
+ <div class="room fallback" id="room6">
+ <img class="rimg" src="assets/room/r6.jpg" alt="Tek-Wall Ridge room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Tek-Wall Ridge</div><div class="rcol">Commercial & Contract · Maharam</div></div>
+ </div>
+ <div class="room fallback" id="room7">
+ <img class="rimg" src="assets/room/r7.jpg" alt="Filigree, Charcoal room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Filigree, Charcoal</div><div class="rcol">Commercial & Contract · Maharam</div></div>
+ </div>
+ <div class="room fallback" id="room8">
+ <img class="rimg" src="assets/room/r8.jpg" alt="Vest, Dock room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Vest, Dock</div><div class="rcol">Commercial & Contract · Maharam</div></div>
+ </div>
+ <div class="room fallback" id="room9">
+ <img class="rimg" src="assets/room/r9.jpg" alt="Firenze, Swell room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Firenze, Swell</div><div class="rcol">Commercial & Contract · Knoll</div></div>
+ </div>
+ <div class="room fallback" id="room10">
+ <img class="rimg" src="assets/room/r10.jpg" alt="Stencil, Ginger room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Stencil, Ginger</div><div class="rcol">Commercial & Contract · Knoll</div></div>
+ </div>
+ <div class="room fallback" id="room11">
+ <img class="rimg" src="assets/room/r11.jpg" alt="Big Floral, Bloom room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Big Floral, Bloom</div><div class="rcol">Commercial & Contract · Knoll</div></div>
+ </div>
+ <div class="room fallback" id="room12">
+ <img class="rimg" src="assets/room/r12.jpg" alt="Xorel, Seafoam room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Xorel, Seafoam</div><div class="rcol">Commercial & Contract · Carnegie</div></div>
+ </div>
+ <div class="room fallback" id="room13">
+ <img class="rimg" src="assets/room/r13.jpg" alt="Xorel, Bamboo room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Xorel, Bamboo</div><div class="rcol">Commercial & Contract · Carnegie</div></div>
+ </div>
+ <div class="room fallback" id="room14">
+ <img class="rimg" src="assets/room/r14.jpg" alt="Xorel, Prism room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Xorel, Prism</div><div class="rcol">Commercial & Contract · Carnegie</div></div>
+ </div>
+ <div class="room fallback" id="room15">
+ <img class="rimg" src="assets/room/r15.jpg" alt="Wannabe, Blue Jay room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Wannabe, Blue Jay</div><div class="rcol">Commercial & Contract · Designtex</div></div>
+ </div>
+ <div class="room fallback" id="room16">
+ <img class="rimg" src="assets/room/r16.jpg" alt="Wannabe, Red room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Wannabe, Red</div><div class="rcol">Commercial & Contract · Designtex</div></div>
+ </div>
+ <div class="room fallback" id="room17">
+ <img class="rimg" src="assets/room/r17.jpg" alt="Grasscloth, Sprig room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Grasscloth, Sprig</div><div class="rcol">Commercial & Contract · Designtex</div></div>
+ </div>
+ <div class="room fallback" id="room18">
+ <img class="rimg" src="assets/room/r18.jpg" alt="Bead 11112 room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Bead 11112</div><div class="rcol">Commercial & Contract · Wolf Gordon</div></div>
+ </div>
+ <div class="room fallback" id="room19">
+ <img class="rimg" src="assets/room/r19.jpg" alt="Dasma, Gold room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Dasma, Gold</div><div class="rcol">Commercial & Contract · Wolf Gordon</div></div>
+ </div>
+ <div class="room fallback" id="room20">
+ <img class="rimg" src="assets/room/r20.jpg" alt="Glasgow, Umber room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Glasgow, Umber</div><div class="rcol">Commercial & Contract · Wolf Gordon</div></div>
+ </div>
+ <div class="room fallback" id="room21">
+ <img class="rimg" src="assets/room/r21.jpg" alt="Finesse, Pearl room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Finesse, Pearl</div><div class="rcol">Commercial & Contract · Majilite</div></div>
+ </div>
+ <div class="room fallback" id="room22">
+ <img class="rimg" src="assets/room/r22.jpg" alt="Cross-Hatch, Gold room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Cross-Hatch, Gold</div><div class="rcol">Commercial & Contract · Majilite</div></div>
+ </div>
+ <div class="room fallback" id="room23">
+ <img class="rimg" src="assets/room/r23.jpg" alt="Radiance, Pearl room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Radiance, Pearl</div><div class="rcol">Commercial & Contract · Majilite</div></div>
+ </div>
+ </div>
+ </div>
+
+ <div class="leaf" id="leaf0">
+ <div class="face front"><img class="art" src="assets/img/p0.jpg" alt="Linsey, Beige" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf1">
+ <div class="face front"><img class="art" src="assets/img/p1.jpg" alt="Renzu Pink" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf2">
+ <div class="face front"><img class="art" src="assets/img/p2.jpg" alt="Silken One, Gold" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf3">
+ <div class="face front"><img class="art" src="assets/img/p3.jpg" alt="Corragatio Vinyl" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf4">
+ <div class="face front"><img class="art" src="assets/img/p4.jpg" alt="Olney Type II" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf5">
+ <div class="face front"><img class="art" src="assets/img/p5.jpg" alt="Rustic Glam Vinyl" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf6">
+ <div class="face front"><img class="art" src="assets/img/p6.jpg" alt="Tek-Wall Ridge" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf7">
+ <div class="face front"><img class="art" src="assets/img/p7.jpg" alt="Filigree, Charcoal" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf8">
+ <div class="face front"><img class="art" src="assets/img/p8.jpg" alt="Vest, Dock" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf9">
+ <div class="face front"><img class="art" src="assets/img/p9.jpg" alt="Firenze, Swell" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf10">
+ <div class="face front"><img class="art" src="assets/img/p10.jpg" alt="Stencil, Ginger" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf11">
+ <div class="face front"><img class="art" src="assets/img/p11.jpg" alt="Big Floral, Bloom" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf12">
+ <div class="face front"><img class="art" src="assets/img/p12.jpg" alt="Xorel, Seafoam" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf13">
+ <div class="face front"><img class="art" src="assets/img/p13.jpg" alt="Xorel, Bamboo" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf14">
+ <div class="face front"><img class="art" src="assets/img/p14.jpg" alt="Xorel, Prism" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf15">
+ <div class="face front"><img class="art" src="assets/img/p15.jpg" alt="Wannabe, Blue Jay" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf16">
+ <div class="face front"><img class="art" src="assets/img/p16.jpg" alt="Wannabe, Red" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf17">
+ <div class="face front"><img class="art" src="assets/img/p17.jpg" alt="Grasscloth, Sprig" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf18">
+ <div class="face front"><img class="art" src="assets/img/p18.jpg" alt="Bead 11112" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf19">
+ <div class="face front"><img class="art" src="assets/img/p19.jpg" alt="Dasma, Gold" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf20">
+ <div class="face front"><img class="art" src="assets/img/p20.jpg" alt="Glasgow, Umber" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf21">
+ <div class="face front"><img class="art" src="assets/img/p21.jpg" alt="Finesse, Pearl" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf22">
+ <div class="face front"><img class="art" src="assets/img/p22.jpg" alt="Cross-Hatch, Gold" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf23">
+ <div class="face front"><img class="art" src="assets/img/p23.jpg" alt="Radiance, Pearl" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ </div>
+
+ <div class="card" id="outro">
+ <div class="kicker">Shop the collection</div>
+ <div class="big">Commercial & Contract</div>
+ <div class="url">designerwallcoverings.com</div>
+ </div>
+
+ <audio id="bgm" src="assets/audio/jazz.wav" data-start="0" data-duration="30.55" data-track-index="20" data-volume="0.18"></audio>
+ <audio id="vo0" src="assets/audio/vo1.wav" data-start="2.4" data-track-index="21" data-volume="1"></audio>
+ <audio id="vo1" src="assets/audio/vo2.wav" data-start="2.9" data-track-index="22" data-volume="1"></audio>
+ <audio id="vo2" src="assets/audio/vo3.wav" data-start="4.8" data-track-index="23" data-volume="1"></audio>
+ <audio id="vo3" src="assets/audio/vo4.wav" data-start="7.65" data-track-index="24" data-volume="1"></audio>
+ <audio id="vo4" src="assets/audio/vo5.wav" data-start="10.5" data-track-index="25" data-volume="1"></audio>
+ <audio id="vo5" src="assets/audio/vo6.wav" data-start="13.35" data-track-index="26" data-volume="1"></audio>
+ <audio id="vo6" src="assets/audio/vo7.wav" data-start="16.2" data-track-index="27" data-volume="1"></audio>
+ <audio id="vo7" src="assets/audio/vo8.wav" data-start="19.05" data-track-index="28" data-volume="1"></audio>
+ <audio id="vo8" src="assets/audio/vo9.wav" data-start="21.9" data-track-index="29" data-volume="1"></audio>
+ <audio id="vo9" src="assets/audio/vo10.wav" data-start="27.7" data-track-index="30" data-volume="1"></audio>
+
+ <script>
+ window.__timelines = window.__timelines || {};
+ const tl = gsap.timeline({ paused: true });
+
+ gsap.set("#leaf0", { rotateY:0, zIndex:24 });
+ gsap.set("#leaf1", { rotateY:0, zIndex:23 });
+ gsap.set("#leaf2", { rotateY:0, zIndex:22 });
+ gsap.set("#leaf3", { rotateY:0, zIndex:21 });
+ gsap.set("#leaf4", { rotateY:0, zIndex:20 });
+ gsap.set("#leaf5", { rotateY:0, zIndex:19 });
+ gsap.set("#leaf6", { rotateY:0, zIndex:18 });
+ gsap.set("#leaf7", { rotateY:0, zIndex:17 });
+ gsap.set("#leaf8", { rotateY:0, zIndex:16 });
+ gsap.set("#leaf9", { rotateY:0, zIndex:15 });
+ gsap.set("#leaf10", { rotateY:0, zIndex:14 });
+ gsap.set("#leaf11", { rotateY:0, zIndex:13 });
+ gsap.set("#leaf12", { rotateY:0, zIndex:12 });
+ gsap.set("#leaf13", { rotateY:0, zIndex:11 });
+ gsap.set("#leaf14", { rotateY:0, zIndex:10 });
+ gsap.set("#leaf15", { rotateY:0, zIndex:9 });
+ gsap.set("#leaf16", { rotateY:0, zIndex:8 });
+ gsap.set("#leaf17", { rotateY:0, zIndex:7 });
+ gsap.set("#leaf18", { rotateY:0, zIndex:6 });
+ gsap.set("#leaf19", { rotateY:0, zIndex:5 });
+ gsap.set("#leaf20", { rotateY:0, zIndex:4 });
+ gsap.set("#leaf21", { rotateY:0, zIndex:3 });
+ gsap.set("#leaf22", { rotateY:0, zIndex:2 });
+ gsap.set("#leaf23", { rotateY:0, zIndex:1 });
+ gsap.set("#room0", { opacity:1 });
+ gsap.set("#room1", { opacity:0 });
+ gsap.set("#room2", { opacity:0 });
+ gsap.set("#room3", { opacity:0 });
+ gsap.set("#room4", { opacity:0 });
+ gsap.set("#room5", { opacity:0 });
+ gsap.set("#room6", { opacity:0 });
+ gsap.set("#room7", { opacity:0 });
+ gsap.set("#room8", { opacity:0 });
+ gsap.set("#room9", { opacity:0 });
+ gsap.set("#room10", { opacity:0 });
+ gsap.set("#room11", { opacity:0 });
+ gsap.set("#room12", { opacity:0 });
+ gsap.set("#room13", { opacity:0 });
+ gsap.set("#room14", { opacity:0 });
+ gsap.set("#room15", { opacity:0 });
+ gsap.set("#room16", { opacity:0 });
+ gsap.set("#room17", { opacity:0 });
+ gsap.set("#room18", { opacity:0 });
+ gsap.set("#room19", { opacity:0 });
+ gsap.set("#room20", { opacity:0 });
+ gsap.set("#room21", { opacity:0 });
+ gsap.set("#room22", { opacity:0 });
+ gsap.set("#room23", { opacity:0 });
+ gsap.set("#stage", { opacity: 0 });
+ gsap.set("#outro", { opacity: 0 }); gsap.set("#outro .big", { y: 34, opacity: 0 }); gsap.set("#outro .url", { opacity: 0 });
+ gsap.set("#cover .big", { y: 40, opacity: 0 }); gsap.set("#cover .kicker,#cover .sub,#cover .rule", { opacity: 0 });
+
+ // cover
+ tl.to("#cover .kicker", { opacity:1, duration:0.5 }, 0.2);
+ tl.to("#cover .big", { opacity:1, y:0, duration:0.8, ease:"power3.out" }, 0.4);
+ tl.to("#cover .rule,#cover .sub", { opacity:1, duration:0.5 }, 1.0);
+ tl.to("#cover", { opacity:0, duration:0.5, ease:"power1.in" }, 1.70);
+ tl.to("#stage", { opacity:1, duration:0.6, ease:"power1.out" }, 1.70);
+
+ // page turns + room crossfades
+
+ tl.to("#leaf0", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 2.9);
+ tl.to("#leaf0 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 2.9);
+ tl.to("#leaf0 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 3.2);
+ tl.set("#leaf0", { zIndex: 1000 }, 3.2);
+ tl.set("#leaf0", { opacity: 0 }, 3.500);
+ tl.to("#room0", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 3.2);
+ tl.to("#room1", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 3.2);
+ tl.to("#leaf1", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 3.85);
+ tl.to("#leaf1 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 3.85);
+ tl.to("#leaf1 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 4.15);
+ tl.set("#leaf1", { zIndex: 1001 }, 4.15);
+ tl.set("#leaf1", { opacity: 0 }, 4.450);
+ tl.to("#room1", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 4.15);
+ tl.to("#room2", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 4.15);
+ tl.to("#leaf2", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 4.8);
+ tl.to("#leaf2 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 4.8);
+ tl.to("#leaf2 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 5.1);
+ tl.set("#leaf2", { zIndex: 1002 }, 5.1);
+ tl.set("#leaf2", { opacity: 0 }, 5.400);
+ tl.to("#room2", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 5.1);
+ tl.to("#room3", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 5.1);
+ tl.to("#leaf3", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 5.75);
+ tl.to("#leaf3 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 5.75);
+ tl.to("#leaf3 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 6.05);
+ tl.set("#leaf3", { zIndex: 1003 }, 6.05);
+ tl.set("#leaf3", { opacity: 0 }, 6.350);
+ tl.to("#room3", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 6.05);
+ tl.to("#room4", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 6.05);
+ tl.to("#leaf4", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 6.7);
+ tl.to("#leaf4 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 6.7);
+ tl.to("#leaf4 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 7);
+ tl.set("#leaf4", { zIndex: 1004 }, 7);
+ tl.set("#leaf4", { opacity: 0 }, 7.300);
+ tl.to("#room4", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 7);
+ tl.to("#room5", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 7);
+ tl.to("#leaf5", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 7.65);
+ tl.to("#leaf5 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 7.65);
+ tl.to("#leaf5 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 7.95);
+ tl.set("#leaf5", { zIndex: 1005 }, 7.95);
+ tl.set("#leaf5", { opacity: 0 }, 8.250);
+ tl.to("#room5", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 7.95);
+ tl.to("#room6", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 7.95);
+ tl.to("#leaf6", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 8.6);
+ tl.to("#leaf6 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 8.6);
+ tl.to("#leaf6 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 8.9);
+ tl.set("#leaf6", { zIndex: 1006 }, 8.9);
+ tl.set("#leaf6", { opacity: 0 }, 9.200);
+ tl.to("#room6", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 8.9);
+ tl.to("#room7", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 8.9);
+ tl.to("#leaf7", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 9.55);
+ tl.to("#leaf7 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 9.55);
+ tl.to("#leaf7 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 9.85);
+ tl.set("#leaf7", { zIndex: 1007 }, 9.85);
+ tl.set("#leaf7", { opacity: 0 }, 10.150);
+ tl.to("#room7", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 9.85);
+ tl.to("#room8", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 9.85);
+ tl.to("#leaf8", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 10.5);
+ tl.to("#leaf8 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 10.5);
+ tl.to("#leaf8 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 10.8);
+ tl.set("#leaf8", { zIndex: 1008 }, 10.8);
+ tl.set("#leaf8", { opacity: 0 }, 11.100);
+ tl.to("#room8", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 10.8);
+ tl.to("#room9", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 10.8);
+ tl.to("#leaf9", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 11.45);
+ tl.to("#leaf9 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 11.45);
+ tl.to("#leaf9 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 11.75);
+ tl.set("#leaf9", { zIndex: 1009 }, 11.75);
+ tl.set("#leaf9", { opacity: 0 }, 12.050);
+ tl.to("#room9", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 11.75);
+ tl.to("#room10", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 11.75);
+ tl.to("#leaf10", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 12.4);
+ tl.to("#leaf10 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 12.4);
+ tl.to("#leaf10 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 12.7);
+ tl.set("#leaf10", { zIndex: 1010 }, 12.7);
+ tl.set("#leaf10", { opacity: 0 }, 13.000);
+ tl.to("#room10", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 12.7);
+ tl.to("#room11", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 12.7);
+ tl.to("#leaf11", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 13.35);
+ tl.to("#leaf11 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 13.35);
+ tl.to("#leaf11 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 13.65);
+ tl.set("#leaf11", { zIndex: 1011 }, 13.65);
+ tl.set("#leaf11", { opacity: 0 }, 13.950);
+ tl.to("#room11", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 13.65);
+ tl.to("#room12", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 13.65);
+ tl.to("#leaf12", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 14.3);
+ tl.to("#leaf12 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 14.3);
+ tl.to("#leaf12 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 14.6);
+ tl.set("#leaf12", { zIndex: 1012 }, 14.6);
+ tl.set("#leaf12", { opacity: 0 }, 14.900);
+ tl.to("#room12", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 14.6);
+ tl.to("#room13", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 14.6);
+ tl.to("#leaf13", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 15.25);
+ tl.to("#leaf13 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 15.25);
+ tl.to("#leaf13 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 15.55);
+ tl.set("#leaf13", { zIndex: 1013 }, 15.55);
+ tl.set("#leaf13", { opacity: 0 }, 15.850);
+ tl.to("#room13", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 15.55);
+ tl.to("#room14", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 15.55);
+ tl.to("#leaf14", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 16.2);
+ tl.to("#leaf14 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 16.2);
+ tl.to("#leaf14 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 16.5);
+ tl.set("#leaf14", { zIndex: 1014 }, 16.5);
+ tl.set("#leaf14", { opacity: 0 }, 16.800);
+ tl.to("#room14", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 16.5);
+ tl.to("#room15", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 16.5);
+ tl.to("#leaf15", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 17.15);
+ tl.to("#leaf15 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 17.15);
+ tl.to("#leaf15 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 17.45);
+ tl.set("#leaf15", { zIndex: 1015 }, 17.45);
+ tl.set("#leaf15", { opacity: 0 }, 17.750);
+ tl.to("#room15", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 17.45);
+ tl.to("#room16", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 17.45);
+ tl.to("#leaf16", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 18.1);
+ tl.to("#leaf16 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 18.1);
+ tl.to("#leaf16 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 18.4);
+ tl.set("#leaf16", { zIndex: 1016 }, 18.4);
+ tl.set("#leaf16", { opacity: 0 }, 18.700);
+ tl.to("#room16", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 18.4);
+ tl.to("#room17", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 18.4);
+ tl.to("#leaf17", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 19.05);
+ tl.to("#leaf17 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 19.05);
+ tl.to("#leaf17 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 19.35);
+ tl.set("#leaf17", { zIndex: 1017 }, 19.35);
+ tl.set("#leaf17", { opacity: 0 }, 19.650);
+ tl.to("#room17", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 19.35);
+ tl.to("#room18", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 19.35);
+ tl.to("#leaf18", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 20);
+ tl.to("#leaf18 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 20);
+ tl.to("#leaf18 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 20.3);
+ tl.set("#leaf18", { zIndex: 1018 }, 20.3);
+ tl.set("#leaf18", { opacity: 0 }, 20.600);
+ tl.to("#room18", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 20.3);
+ tl.to("#room19", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 20.3);
+ tl.to("#leaf19", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 20.95);
+ tl.to("#leaf19 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 20.95);
+ tl.to("#leaf19 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 21.25);
+ tl.set("#leaf19", { zIndex: 1019 }, 21.25);
+ tl.set("#leaf19", { opacity: 0 }, 21.550);
+ tl.to("#room19", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 21.25);
+ tl.to("#room20", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 21.25);
+ tl.to("#leaf20", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 21.9);
+ tl.to("#leaf20 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 21.9);
+ tl.to("#leaf20 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 22.2);
+ tl.set("#leaf20", { zIndex: 1020 }, 22.2);
+ tl.set("#leaf20", { opacity: 0 }, 22.500);
+ tl.to("#room20", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 22.2);
+ tl.to("#room21", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 22.2);
+ tl.to("#leaf21", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 22.85);
+ tl.to("#leaf21 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 22.85);
+ tl.to("#leaf21 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 23.15);
+ tl.set("#leaf21", { zIndex: 1021 }, 23.15);
+ tl.set("#leaf21", { opacity: 0 }, 23.450);
+ tl.to("#room21", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 23.15);
+ tl.to("#room22", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 23.15);
+ tl.to("#leaf22", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 23.8);
+ tl.to("#leaf22 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 23.8);
+ tl.to("#leaf22 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 24.1);
+ tl.set("#leaf22", { zIndex: 1022 }, 24.1);
+ tl.set("#leaf22", { opacity: 0 }, 24.400);
+ tl.to("#room22", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 24.1);
+ tl.to("#room23", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 24.1);
+ tl.to("#leaf23 .art", { scale: 1.05, duration: 3.20, ease:"power1.out" }, 24.75);
+ tl.to("#room23 .rimg", { scale: 1.06, duration: 3.20, ease:"power1.out" }, 24.75);
+
+ // outro
+ tl.to("#stage", { opacity:0, duration:0.6, ease:"power1.in" }, 27.55);
+ tl.to("#outro", { opacity:1, duration:0.5 }, 27.75);
+ tl.to("#outro .big", { opacity:1, y:0, duration:0.7, ease:"power2.out" }, 27.95);
+ tl.to("#outro .url", { opacity:1, duration:0.5 }, 28.45);
+
+ gsap.set("#bgm", { volume: 0.18 });
+ tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 2.10);
+ tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 5.00);
+ tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 2.60);
+ tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 5.50);
+ tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 4.50);
+ tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 7.40);
+ tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 7.35);
+ tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 10.25);
+ tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 10.20);
+ tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 13.10);
+ tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 13.05);
+ tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 15.95);
+ tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 15.90);
+ tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 18.80);
+ tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 18.75);
+ tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 21.65);
+ tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 21.60);
+ tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 24.50);
+ tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 27.40);
+ tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 30.30);
+ tl.to("#bgm", { volume: 0, duration: 1.0, ease:"power1.in" }, 29.45);
+
+ window.__timelines["flipbook"] = tl;
+ </script>
+ </div>
+</body>
+</html>
\ No newline at end of file
← 05271fe auto-data-snapshot: 2026-08-12T11:58:35 (3 data files) — dat
·
back to Dw Marketing Reels
·
auto-data-snapshot: 2026-08-12T12:29:13 (2 data files) — pub 978ef0c →