← back to Dw Marketing Reels
commercial flip-book: 2s/flip + narration synced over each pattern; rerender+redeploy (?v=3)
854502ca974916ea792e4538545a946c4df855cd · 2026-08-13 11:38:19 -0700 · Steve Abrams
Files touched
M flipbooks/commercial-collection/audio.jsonM flipbooks/commercial-collection/index.htmlM public/collections/commercial-collection.html
Diff
commit 854502ca974916ea792e4538545a946c4df855cd
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Thu Aug 13 11:38:19 2026 -0700
commercial flip-book: 2s/flip + narration synced over each pattern; rerender+redeploy (?v=3)
---
flipbooks/commercial-collection/audio.json | 2 +-
flipbooks/commercial-collection/index.html | 390 +++++++++++++-------------
public/collections/commercial-collection.html | 2 +-
3 files changed, 197 insertions(+), 197 deletions(-)
diff --git a/flipbooks/commercial-collection/audio.json b/flipbooks/commercial-collection/audio.json
index e613f25..ab1fed0 100644
--- a/flipbooks/commercial-collection/audio.json
+++ b/flipbooks/commercial-collection/audio.json
@@ -2,7 +2,7 @@
"bgm": { "src": "assets/audio/jazz.wav", "volume": 0.18 },
"vo": [
{ "src": "assets/audio/vo1.wav", "anchor": 0.3 },
- { "src": "assets/audio/vo2.wav", "anchor": "chapter:Koroseal" },
+ { "src": "assets/audio/vo2.wav", "anchor": 5.9 },
{ "src": "assets/audio/vo3.wav", "anchor": "chapter:Hollywood Wallcoverings" },
{ "src": "assets/audio/vo4.wav", "anchor": "chapter:Maharam" },
{ "src": "assets/audio/vo5.wav", "anchor": "chapter:Knoll" },
diff --git a/flipbooks/commercial-collection/index.html b/flipbooks/commercial-collection/index.html
index 76cf022..1318193 100644
--- a/flipbooks/commercial-collection/index.html
+++ b/flipbooks/commercial-collection/index.html
@@ -54,7 +54,7 @@
</style>
</head>
<body>
- <div id="main-composition" data-composition-id="flipbook" data-width="1920" data-height="1080" data-start="0" data-duration="82.5">
+ <div id="main-composition" data-composition-id="flipbook" data-width="1920" data-height="1080" data-start="0" data-duration="60">
<div class="card" id="cover">
<div class="kicker">Designer Wallcoverings presents</div>
@@ -318,17 +318,17 @@
<div class="url">designerwallcoverings.com</div>
</div>
- <audio id="bgm" src="assets/audio/jazz.wav" data-start="0" data-duration="82.5" data-track-index="20" data-volume="0.18"></audio>
+ <audio id="bgm" src="assets/audio/jazz.wav" data-start="0" data-duration="60" data-track-index="20" data-volume="0.18"></audio>
<audio id="vo0" src="assets/audio/vo1.wav" data-start="0.3" data-track-index="21" data-volume="1"></audio>
- <audio id="vo1" src="assets/audio/vo2.wav" data-start="7.7" data-track-index="22" data-volume="1"></audio>
- <audio id="vo2" src="assets/audio/vo3.wav" data-start="13.7" data-track-index="23" data-volume="1"></audio>
- <audio id="vo3" src="assets/audio/vo4.wav" data-start="22.7" data-track-index="24" data-volume="1"></audio>
- <audio id="vo4" src="assets/audio/vo5.wav" data-start="31.7" data-track-index="25" data-volume="1"></audio>
- <audio id="vo5" src="assets/audio/vo6.wav" data-start="40.7" data-track-index="26" data-volume="1"></audio>
- <audio id="vo6" src="assets/audio/vo7.wav" data-start="49.7" data-track-index="27" data-volume="1"></audio>
- <audio id="vo7" src="assets/audio/vo8.wav" data-start="58.7" data-track-index="28" data-volume="1"></audio>
- <audio id="vo8" src="assets/audio/vo9.wav" data-start="67.7" data-track-index="29" data-volume="1"></audio>
- <audio id="vo9" src="assets/audio/vo10.wav" data-start="79.65" data-track-index="30" data-volume="1"></audio>
+ <audio id="vo1" src="assets/audio/vo2.wav" data-start="5.9" data-track-index="22" data-volume="1"></audio>
+ <audio id="vo2" src="assets/audio/vo3.wav" data-start="10.7" data-track-index="23" data-volume="1"></audio>
+ <audio id="vo3" src="assets/audio/vo4.wav" data-start="16.7" data-track-index="24" data-volume="1"></audio>
+ <audio id="vo4" src="assets/audio/vo5.wav" data-start="22.7" data-track-index="25" data-volume="1"></audio>
+ <audio id="vo5" src="assets/audio/vo6.wav" data-start="28.7" data-track-index="26" data-volume="1"></audio>
+ <audio id="vo6" src="assets/audio/vo7.wav" data-start="34.7" data-track-index="27" data-volume="1"></audio>
+ <audio id="vo7" src="assets/audio/vo8.wav" data-start="40.7" data-track-index="28" data-volume="1"></audio>
+ <audio id="vo8" src="assets/audio/vo9.wav" data-start="46.7" data-track-index="29" data-volume="1"></audio>
+ <audio id="vo9" src="assets/audio/vo10.wav" data-start="55.65" data-track-index="30" data-volume="1"></audio>
<script>
window.__timelines = window.__timelines || {};
@@ -390,203 +390,203 @@
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" }, 6.50);
- tl.to("#stage", { opacity:1, duration:0.6, ease:"power1.out" }, 6.50);
+ tl.to("#cover", { opacity:0, duration:0.5, ease:"power1.in" }, 5.50);
+ tl.to("#stage", { opacity:1, duration:0.6, ease:"power1.out" }, 5.50);
// page turns + room crossfades
- tl.to("#leaf0", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 7.7);
- tl.to("#leaf0 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 7.7);
- tl.to("#leaf0 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 8);
- tl.set("#leaf0", { zIndex: 1000 }, 8);
- tl.set("#leaf0", { opacity: 0 }, 8.300);
- tl.to("#room0", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 8);
- tl.to("#room1", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 8);
- tl.to("#leaf1", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 10.7);
- tl.to("#leaf1 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 10.7);
- tl.to("#leaf1 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 11);
- tl.set("#leaf1", { zIndex: 1001 }, 11);
- tl.set("#leaf1", { opacity: 0 }, 11.300);
- tl.to("#room1", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 11);
- tl.to("#room2", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 11);
- tl.to("#leaf2", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 13.7);
- tl.to("#leaf2 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 13.7);
- tl.to("#leaf2 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 14);
- tl.set("#leaf2", { zIndex: 1002 }, 14);
- tl.set("#leaf2", { opacity: 0 }, 14.300);
- tl.to("#room2", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 14);
- tl.to("#room3", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 14);
- tl.to("#leaf3", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 16.7);
- tl.to("#leaf3 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 16.7);
- tl.to("#leaf3 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 17);
- tl.set("#leaf3", { zIndex: 1003 }, 17);
- tl.set("#leaf3", { opacity: 0 }, 17.300);
- tl.to("#room3", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 17);
- tl.to("#room4", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 17);
- tl.to("#leaf4", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 19.7);
- tl.to("#leaf4 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 19.7);
- tl.to("#leaf4 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 20);
- tl.set("#leaf4", { zIndex: 1004 }, 20);
- tl.set("#leaf4", { opacity: 0 }, 20.300);
- tl.to("#room4", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 20);
- tl.to("#room5", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 20);
- tl.to("#leaf5", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 22.7);
- tl.to("#leaf5 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 22.7);
- tl.to("#leaf5 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 23);
- tl.set("#leaf5", { zIndex: 1005 }, 23);
- tl.set("#leaf5", { opacity: 0 }, 23.300);
- tl.to("#room5", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 23);
- tl.to("#room6", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 23);
- tl.to("#leaf6", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 25.7);
- tl.to("#leaf6 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 25.7);
- tl.to("#leaf6 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 26);
- tl.set("#leaf6", { zIndex: 1006 }, 26);
- tl.set("#leaf6", { opacity: 0 }, 26.300);
- tl.to("#room6", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 26);
- tl.to("#room7", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 26);
- tl.to("#leaf7", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 28.7);
- tl.to("#leaf7 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 28.7);
- tl.to("#leaf7 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 29);
- tl.set("#leaf7", { zIndex: 1007 }, 29);
- tl.set("#leaf7", { opacity: 0 }, 29.300);
- tl.to("#room7", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 29);
- tl.to("#room8", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 29);
- tl.to("#leaf8", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 31.7);
- tl.to("#leaf8 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 31.7);
- tl.to("#leaf8 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 32);
- tl.set("#leaf8", { zIndex: 1008 }, 32);
- tl.set("#leaf8", { opacity: 0 }, 32.300);
- tl.to("#room8", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 32);
- tl.to("#room9", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 32);
- tl.to("#leaf9", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 34.7);
- tl.to("#leaf9 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 34.7);
- tl.to("#leaf9 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 35);
- tl.set("#leaf9", { zIndex: 1009 }, 35);
- tl.set("#leaf9", { opacity: 0 }, 35.300);
- tl.to("#room9", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 35);
- tl.to("#room10", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 35);
- tl.to("#leaf10", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 37.7);
- tl.to("#leaf10 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 37.7);
- tl.to("#leaf10 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 38);
- tl.set("#leaf10", { zIndex: 1010 }, 38);
- tl.set("#leaf10", { opacity: 0 }, 38.300);
- tl.to("#room10", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 38);
- tl.to("#room11", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 38);
- tl.to("#leaf11", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 40.7);
- tl.to("#leaf11 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 40.7);
- tl.to("#leaf11 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 41);
- tl.set("#leaf11", { zIndex: 1011 }, 41);
- tl.set("#leaf11", { opacity: 0 }, 41.300);
- tl.to("#room11", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 41);
- tl.to("#room12", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 41);
- tl.to("#leaf12", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 43.7);
- tl.to("#leaf12 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 43.7);
- tl.to("#leaf12 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 44);
- tl.set("#leaf12", { zIndex: 1012 }, 44);
- tl.set("#leaf12", { opacity: 0 }, 44.300);
- tl.to("#room12", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 44);
- tl.to("#room13", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 44);
- tl.to("#leaf13", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 46.7);
- tl.to("#leaf13 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 46.7);
- tl.to("#leaf13 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 47);
- tl.set("#leaf13", { zIndex: 1013 }, 47);
- tl.set("#leaf13", { opacity: 0 }, 47.300);
- tl.to("#room13", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 47);
- tl.to("#room14", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 47);
- tl.to("#leaf14", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 49.7);
- tl.to("#leaf14 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 49.7);
- tl.to("#leaf14 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 50);
- tl.set("#leaf14", { zIndex: 1014 }, 50);
- tl.set("#leaf14", { opacity: 0 }, 50.300);
- tl.to("#room14", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 50);
- tl.to("#room15", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 50);
- tl.to("#leaf15", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 52.7);
- tl.to("#leaf15 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 52.7);
- tl.to("#leaf15 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 53);
- tl.set("#leaf15", { zIndex: 1015 }, 53);
- tl.set("#leaf15", { opacity: 0 }, 53.300);
- tl.to("#room15", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 53);
- tl.to("#room16", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 53);
- tl.to("#leaf16", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 55.7);
- tl.to("#leaf16 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 55.7);
- tl.to("#leaf16 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 56);
- tl.set("#leaf16", { zIndex: 1016 }, 56);
- tl.set("#leaf16", { opacity: 0 }, 56.300);
- tl.to("#room16", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 56);
- tl.to("#room17", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 56);
- tl.to("#leaf17", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 58.7);
- tl.to("#leaf17 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 58.7);
- tl.to("#leaf17 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 59);
- tl.set("#leaf17", { zIndex: 1017 }, 59);
- tl.set("#leaf17", { opacity: 0 }, 59.300);
- tl.to("#room17", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 59);
- tl.to("#room18", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 59);
- tl.to("#leaf18", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 61.7);
- tl.to("#leaf18 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 61.7);
- tl.to("#leaf18 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 62);
- tl.set("#leaf18", { zIndex: 1018 }, 62);
- tl.set("#leaf18", { opacity: 0 }, 62.300);
- tl.to("#room18", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 62);
- tl.to("#room19", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 62);
- tl.to("#leaf19", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 64.7);
- tl.to("#leaf19 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 64.7);
- tl.to("#leaf19 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 65);
- tl.set("#leaf19", { zIndex: 1019 }, 65);
- tl.set("#leaf19", { opacity: 0 }, 65.300);
- tl.to("#room19", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 65);
- tl.to("#room20", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 65);
- tl.to("#leaf20", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 67.7);
- tl.to("#leaf20 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 67.7);
- tl.to("#leaf20 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 68);
- tl.set("#leaf20", { zIndex: 1020 }, 68);
- tl.set("#leaf20", { opacity: 0 }, 68.300);
- tl.to("#room20", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 68);
- tl.to("#room21", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 68);
- tl.to("#leaf21", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 70.7);
- tl.to("#leaf21 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 70.7);
- tl.to("#leaf21 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 71);
- tl.set("#leaf21", { zIndex: 1021 }, 71);
- tl.set("#leaf21", { opacity: 0 }, 71.300);
- tl.to("#room21", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 71);
- tl.to("#room22", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 71);
- tl.to("#leaf22", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 73.7);
- tl.to("#leaf22 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 73.7);
- tl.to("#leaf22 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 74);
- tl.set("#leaf22", { zIndex: 1022 }, 74);
- tl.set("#leaf22", { opacity: 0 }, 74.300);
- tl.to("#room22", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 74);
- tl.to("#room23", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 74);
- tl.to("#leaf23 .art", { scale: 1.05, duration: 3.20, ease:"power1.out" }, 76.7);
- tl.to("#room23 .rimg", { scale: 1.06, duration: 3.20, ease:"power1.out" }, 76.7);
+ tl.to("#leaf0", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 6.7);
+ tl.to("#leaf0 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 6.7);
+ tl.to("#leaf0 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 7);
+ tl.set("#leaf0", { zIndex: 1000 }, 7);
+ tl.set("#leaf0", { opacity: 0 }, 7.300);
+ tl.to("#room0", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 7);
+ tl.to("#room1", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 7);
+ tl.to("#leaf1", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 8.7);
+ tl.to("#leaf1 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 8.7);
+ tl.to("#leaf1 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 9);
+ tl.set("#leaf1", { zIndex: 1001 }, 9);
+ tl.set("#leaf1", { opacity: 0 }, 9.300);
+ tl.to("#room1", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 9);
+ tl.to("#room2", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 9);
+ tl.to("#leaf2", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 10.7);
+ tl.to("#leaf2 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 10.7);
+ tl.to("#leaf2 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 11);
+ tl.set("#leaf2", { zIndex: 1002 }, 11);
+ tl.set("#leaf2", { opacity: 0 }, 11.300);
+ tl.to("#room2", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 11);
+ tl.to("#room3", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 11);
+ tl.to("#leaf3", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 12.7);
+ tl.to("#leaf3 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 12.7);
+ tl.to("#leaf3 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 13);
+ tl.set("#leaf3", { zIndex: 1003 }, 13);
+ tl.set("#leaf3", { opacity: 0 }, 13.300);
+ tl.to("#room3", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 13);
+ tl.to("#room4", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 13);
+ tl.to("#leaf4", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 14.7);
+ tl.to("#leaf4 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 14.7);
+ tl.to("#leaf4 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 15);
+ tl.set("#leaf4", { zIndex: 1004 }, 15);
+ tl.set("#leaf4", { opacity: 0 }, 15.300);
+ tl.to("#room4", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 15);
+ tl.to("#room5", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 15);
+ tl.to("#leaf5", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 16.7);
+ tl.to("#leaf5 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 16.7);
+ tl.to("#leaf5 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 17);
+ tl.set("#leaf5", { zIndex: 1005 }, 17);
+ tl.set("#leaf5", { opacity: 0 }, 17.300);
+ tl.to("#room5", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 17);
+ tl.to("#room6", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 17);
+ tl.to("#leaf6", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 18.7);
+ tl.to("#leaf6 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 18.7);
+ tl.to("#leaf6 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 19);
+ tl.set("#leaf6", { zIndex: 1006 }, 19);
+ tl.set("#leaf6", { opacity: 0 }, 19.300);
+ tl.to("#room6", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 19);
+ tl.to("#room7", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 19);
+ tl.to("#leaf7", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 20.7);
+ tl.to("#leaf7 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 20.7);
+ tl.to("#leaf7 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 21);
+ tl.set("#leaf7", { zIndex: 1007 }, 21);
+ tl.set("#leaf7", { opacity: 0 }, 21.300);
+ tl.to("#room7", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 21);
+ tl.to("#room8", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 21);
+ tl.to("#leaf8", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 22.7);
+ tl.to("#leaf8 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 22.7);
+ tl.to("#leaf8 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 23);
+ tl.set("#leaf8", { zIndex: 1008 }, 23);
+ tl.set("#leaf8", { opacity: 0 }, 23.300);
+ tl.to("#room8", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 23);
+ tl.to("#room9", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 23);
+ tl.to("#leaf9", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 24.7);
+ tl.to("#leaf9 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 24.7);
+ tl.to("#leaf9 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 25);
+ tl.set("#leaf9", { zIndex: 1009 }, 25);
+ tl.set("#leaf9", { opacity: 0 }, 25.300);
+ tl.to("#room9", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 25);
+ tl.to("#room10", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 25);
+ tl.to("#leaf10", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 26.7);
+ tl.to("#leaf10 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 26.7);
+ tl.to("#leaf10 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 27);
+ tl.set("#leaf10", { zIndex: 1010 }, 27);
+ tl.set("#leaf10", { opacity: 0 }, 27.300);
+ tl.to("#room10", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 27);
+ tl.to("#room11", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 27);
+ tl.to("#leaf11", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 28.7);
+ tl.to("#leaf11 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 28.7);
+ tl.to("#leaf11 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 29);
+ tl.set("#leaf11", { zIndex: 1011 }, 29);
+ tl.set("#leaf11", { opacity: 0 }, 29.300);
+ tl.to("#room11", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 29);
+ tl.to("#room12", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 29);
+ tl.to("#leaf12", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 30.7);
+ tl.to("#leaf12 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 30.7);
+ tl.to("#leaf12 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 31);
+ tl.set("#leaf12", { zIndex: 1012 }, 31);
+ tl.set("#leaf12", { opacity: 0 }, 31.300);
+ tl.to("#room12", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 31);
+ tl.to("#room13", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 31);
+ tl.to("#leaf13", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 32.7);
+ tl.to("#leaf13 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 32.7);
+ tl.to("#leaf13 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 33);
+ tl.set("#leaf13", { zIndex: 1013 }, 33);
+ tl.set("#leaf13", { opacity: 0 }, 33.300);
+ tl.to("#room13", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 33);
+ tl.to("#room14", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 33);
+ tl.to("#leaf14", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 34.7);
+ tl.to("#leaf14 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 34.7);
+ tl.to("#leaf14 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 35);
+ tl.set("#leaf14", { zIndex: 1014 }, 35);
+ tl.set("#leaf14", { opacity: 0 }, 35.300);
+ tl.to("#room14", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 35);
+ tl.to("#room15", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 35);
+ tl.to("#leaf15", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 36.7);
+ tl.to("#leaf15 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 36.7);
+ tl.to("#leaf15 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 37);
+ tl.set("#leaf15", { zIndex: 1015 }, 37);
+ tl.set("#leaf15", { opacity: 0 }, 37.300);
+ tl.to("#room15", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 37);
+ tl.to("#room16", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 37);
+ tl.to("#leaf16", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 38.7);
+ tl.to("#leaf16 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 38.7);
+ tl.to("#leaf16 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 39);
+ tl.set("#leaf16", { zIndex: 1016 }, 39);
+ tl.set("#leaf16", { opacity: 0 }, 39.300);
+ tl.to("#room16", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 39);
+ tl.to("#room17", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 39);
+ tl.to("#leaf17", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 40.7);
+ tl.to("#leaf17 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 40.7);
+ tl.to("#leaf17 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 41);
+ tl.set("#leaf17", { zIndex: 1017 }, 41);
+ tl.set("#leaf17", { opacity: 0 }, 41.300);
+ tl.to("#room17", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 41);
+ tl.to("#room18", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 41);
+ tl.to("#leaf18", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 42.7);
+ tl.to("#leaf18 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 42.7);
+ tl.to("#leaf18 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 43);
+ tl.set("#leaf18", { zIndex: 1018 }, 43);
+ tl.set("#leaf18", { opacity: 0 }, 43.300);
+ tl.to("#room18", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 43);
+ tl.to("#room19", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 43);
+ tl.to("#leaf19", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 44.7);
+ tl.to("#leaf19 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 44.7);
+ tl.to("#leaf19 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 45);
+ tl.set("#leaf19", { zIndex: 1019 }, 45);
+ tl.set("#leaf19", { opacity: 0 }, 45.300);
+ tl.to("#room19", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 45);
+ tl.to("#room20", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 45);
+ tl.to("#leaf20", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 46.7);
+ tl.to("#leaf20 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 46.7);
+ tl.to("#leaf20 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 47);
+ tl.set("#leaf20", { zIndex: 1020 }, 47);
+ tl.set("#leaf20", { opacity: 0 }, 47.300);
+ tl.to("#room20", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 47);
+ tl.to("#room21", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 47);
+ tl.to("#leaf21", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 48.7);
+ tl.to("#leaf21 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 48.7);
+ tl.to("#leaf21 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 49);
+ tl.set("#leaf21", { zIndex: 1021 }, 49);
+ tl.set("#leaf21", { opacity: 0 }, 49.300);
+ tl.to("#room21", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 49);
+ tl.to("#room22", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 49);
+ tl.to("#leaf22", { rotateY: -180, duration: 0.6, ease: "power2.inOut" }, 50.7);
+ tl.to("#leaf22 .shade", { opacity: 0.5, duration: 0.300, ease:"power1.in" }, 50.7);
+ tl.to("#leaf22 .shade", { opacity: 0, duration: 0.300, ease:"power1.out" }, 51);
+ tl.set("#leaf22", { zIndex: 1022 }, 51);
+ tl.set("#leaf22", { opacity: 0 }, 51.300);
+ tl.to("#room22", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 51);
+ tl.to("#room23", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 51);
+ tl.to("#leaf23 .art", { scale: 1.05, duration: 3.20, ease:"power1.out" }, 52.7);
+ tl.to("#room23 .rimg", { scale: 1.06, duration: 3.20, ease:"power1.out" }, 52.7);
// outro
- tl.to("#stage", { opacity:0, duration:0.6, ease:"power1.in" }, 79.50);
- tl.to("#outro", { opacity:1, duration:0.5 }, 79.70);
- tl.to("#outro .big", { opacity:1, y:0, duration:0.7, ease:"power2.out" }, 79.90);
- tl.to("#outro .url", { opacity:1, duration:0.5 }, 80.40);
+ tl.to("#stage", { opacity:0, duration:0.6, ease:"power1.in" }, 55.50);
+ tl.to("#outro", { opacity:1, duration:0.5 }, 55.70);
+ tl.to("#outro .big", { opacity:1, y:0, duration:0.7, ease:"power2.out" }, 55.90);
+ tl.to("#outro .url", { opacity:1, duration:0.5 }, 56.40);
gsap.set("#bgm", { volume: 0.18 });
tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 0.00);
tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 2.90);
- tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 7.40);
- tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 10.30);
- tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 13.40);
- tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 16.30);
+ tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 5.60);
+ tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 8.50);
+ tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 10.40);
+ tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 13.30);
+ tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 16.40);
+ tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 19.30);
tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 22.40);
tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 25.30);
- tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 31.40);
- tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 34.30);
+ tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 28.40);
+ tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 31.30);
+ tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 34.40);
+ tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 37.30);
tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 40.40);
tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 43.30);
- tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 49.40);
- tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 52.30);
- tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 58.40);
- tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 61.30);
- tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 67.40);
- tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 70.30);
- tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 79.35);
- tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 82.25);
- tl.to("#bgm", { volume: 0, duration: 1.0, ease:"power1.in" }, 81.40);
+ tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 46.40);
+ tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 49.30);
+ tl.to("#bgm", { volume: 0.09, duration: 0.4 }, 55.35);
+ tl.to("#bgm", { volume: 0.18, duration: 0.6 }, 58.25);
+ tl.to("#bgm", { volume: 0, duration: 1.0, ease:"power1.in" }, 58.90);
window.__timelines["flipbook"] = tl;
</script>
diff --git a/public/collections/commercial-collection.html b/public/collections/commercial-collection.html
index 2182732..ba6604c 100644
--- a/public/collections/commercial-collection.html
+++ b/public/collections/commercial-collection.html
@@ -37,7 +37,7 @@
<div class="wrap"><div class="section-label">The Flip Book · narrated</div>
<div class="film"><div class="player">
<video id="fbvid" controls playsinline preload="metadata" poster="/public/collections/commercial-collection-poster.jpg">
- <source src="/reels/commercial-collection-flipbook.mp4?v=2" type="video/mp4"></video>
+ <source src="/reels/commercial-collection-flipbook.mp4?v=3" type="video/mp4"></video>
<div class="vchip">
<button type="button" id="fbspeed" title="Playback speed" aria-label="Adjust playback speed">⏩ 1×</button>
<button type="button" id="fbsound" title="Sound on/off" aria-label="Toggle sound">🔊</button>
← 293b995 commercial flip-book: add vendor logo per page + fix intro/K
·
back to Dw Marketing Reels
·
commercial flip-book: remove per-page logos + 1.3s/flip + ga 94e00f5 →