← back to Dw Marketing Reels
Graduate flipbook: remove cheetah (21 patterns) + half-speed (48s)
1b2b7e269ce2259f59e7fc46f2dba4012d70fae4 · 2026-07-30 11:11:18 -0700 · Steve Abrams
Files touched
M data/graduate-clean.jsonM flipbooks/graduate-collection/index.htmlM public/collections/graduate-collection.html
Diff
commit 1b2b7e269ce2259f59e7fc46f2dba4012d70fae4
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Thu Jul 30 11:11:18 2026 -0700
Graduate flipbook: remove cheetah (21 patterns) + half-speed (48s)
---
data/graduate-clean.json | 16 -
flipbooks/graduate-collection/index.html | 510 +++++++++++++---------------
public/collections/graduate-collection.html | 4 +-
3 files changed, 239 insertions(+), 291 deletions(-)
diff --git a/data/graduate-clean.json b/data/graduate-clean.json
index a64eb94..b163ab4 100644
--- a/data/graduate-clean.json
+++ b/data/graduate-clean.json
@@ -39,22 +39,6 @@
"has_room": true,
"chapter": "big cats"
},
- {
- "title": "Cheetah - Brown",
- "handle": "cheetah-brown-graduate-collection",
- "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/IMG-1501.jpg?v=1772164931",
- "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/3E800CF2-DCD4-4AF0-A7D9-344DB9DD0CDB.jpg?v=1772164931",
- "has_room": true,
- "chapter": "big cats"
- },
- {
- "title": "Cheetah Brown",
- "handle": "cheetah-brown-wallpaper-graduate-collection",
- "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/IMG-1501_1eec4f1c-a048-47e3-9ff5-cb5966b054b7.jpg?v=1773663602",
- "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/IMG-1501_0ea917fa-2488-405b-a543-2cb32ef2e233.jpg?v=1775762462",
- "has_room": true,
- "chapter": "big cats"
- },
{
"title": "Visitorian - Taupe",
"handle": "visitorian-wallpaper",
diff --git a/flipbooks/graduate-collection/index.html b/flipbooks/graduate-collection/index.html
index a0e1fbd..e967028 100644
--- a/flipbooks/graduate-collection/index.html
+++ b/flipbooks/graduate-collection/index.html
@@ -50,7 +50,7 @@
</style>
</head>
<body>
- <div id="main-composition" data-composition-id="flipbook" data-width="1920" data-height="1080" data-start="0" data-duration="29.6">
+ <div id="main-composition" data-composition-id="flipbook" data-width="1920" data-height="1080" data-start="0" data-duration="48.2">
<div class="card" id="cover">
<div class="kicker">Designer Wallcoverings presents</div>
@@ -89,92 +89,82 @@
<div class="rcap"><div class="rpat">All Over Leopard - Brown</div><div class="rcol">Graduate Collection · big cats</div></div>
</div>
<div class="room" id="room5">
- <img class="rimg" src="assets/room/r5.jpg" alt="Cheetah - Brown room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Cheetah - Brown</div><div class="rcol">Graduate Collection · big cats</div></div>
- </div>
- <div class="room" id="room6">
- <img class="rimg" src="assets/room/r6.jpg" alt="Cheetah Brown room" />
- <div class="rtint"></div>
- <div class="rcap"><div class="rpat">Cheetah Brown</div><div class="rcol">Graduate Collection · big cats</div></div>
- </div>
- <div class="room" id="room7">
- <img class="rimg" src="assets/room/r7.jpg" alt="Visitorian - Taupe room" />
+ <img class="rimg" src="assets/room/r5.jpg" alt="Visitorian - Taupe room" />
<div class="rtint"></div>
<div class="rcap"><div class="rpat">Visitorian - Taupe</div><div class="rcol">Graduate Collection · characters</div></div>
</div>
- <div class="room fallback" id="room8">
- <img class="rimg" src="assets/room/r8.jpg" alt="Visitorian Navy room" />
+ <div class="room fallback" id="room6">
+ <img class="rimg" src="assets/room/r6.jpg" alt="Visitorian Navy room" />
<div class="rtint"></div>
<div class="rcap"><div class="rpat">Visitorian Navy</div><div class="rcol">Graduate Collection · characters</div></div>
</div>
- <div class="room fallback" id="room9">
- <img class="rimg" src="assets/room/r9.jpg" alt="Visitorian Mauve room" />
+ <div class="room fallback" id="room7">
+ <img class="rimg" src="assets/room/r7.jpg" alt="Visitorian Mauve room" />
<div class="rtint"></div>
<div class="rcap"><div class="rpat">Visitorian Mauve</div><div class="rcol">Graduate Collection · characters</div></div>
</div>
- <div class="room" id="room10">
- <img class="rimg" src="assets/room/r10.jpg" alt="Visitorian Blue room" />
+ <div class="room" id="room8">
+ <img class="rimg" src="assets/room/r8.jpg" alt="Visitorian Blue room" />
<div class="rtint"></div>
<div class="rcap"><div class="rpat">Visitorian Blue</div><div class="rcol">Graduate Collection · characters</div></div>
</div>
- <div class="room" id="room11">
- <img class="rimg" src="assets/room/r11.jpg" alt="Jolly Boy Dog & Friends room" />
+ <div class="room" id="room9">
+ <img class="rimg" src="assets/room/r9.jpg" alt="Jolly Boy Dog & Friends room" />
<div class="rtint"></div>
<div class="rcap"><div class="rpat">Jolly Boy Dog & Friends</div><div class="rcol">Graduate Collection · characters</div></div>
</div>
- <div class="room" id="room12">
- <img class="rimg" src="assets/room/r12.jpg" alt="Steampunk Notice Board room" />
+ <div class="room" id="room10">
+ <img class="rimg" src="assets/room/r10.jpg" alt="Steampunk Notice Board room" />
<div class="rtint"></div>
<div class="rcap"><div class="rpat">Steampunk Notice Board</div><div class="rcol">Graduate Collection · characters</div></div>
</div>
- <div class="room fallback" id="room13">
- <img class="rimg" src="assets/room/r13.jpg" alt="Portarait Gallery Taupe room" />
+ <div class="room fallback" id="room11">
+ <img class="rimg" src="assets/room/r11.jpg" alt="Portarait Gallery Taupe room" />
<div class="rtint"></div>
<div class="rcap"><div class="rpat">Portarait Gallery Taupe</div><div class="rcol">Graduate Collection · characters</div></div>
</div>
- <div class="room" id="room14">
- <img class="rimg" src="assets/room/r14.jpg" alt="Dachshund Dog room" />
+ <div class="room" id="room12">
+ <img class="rimg" src="assets/room/r12.jpg" alt="Dachshund Dog room" />
<div class="rtint"></div>
<div class="rcap"><div class="rpat">Dachshund Dog</div><div class="rcol">Graduate Collection · characters</div></div>
</div>
- <div class="room" id="room15">
- <img class="rimg" src="assets/room/r15.jpg" alt="Colonel Fox at the Gentleman's Club - Mustard room" />
+ <div class="room" id="room13">
+ <img class="rimg" src="assets/room/r13.jpg" alt="Colonel Fox at the Gentleman's Club - Mustard room" />
<div class="rtint"></div>
<div class="rcap"><div class="rpat">Colonel Fox at the Gentleman's Club - Mustard</div><div class="rcol">Graduate Collection · characters</div></div>
</div>
- <div class="room" id="room16">
- <img class="rimg" src="assets/room/r16.jpg" alt="Stag Grande - Plum room" />
+ <div class="room" id="room14">
+ <img class="rimg" src="assets/room/r14.jpg" alt="Stag Grande - Plum room" />
<div class="rtint"></div>
<div class="rcap"><div class="rpat">Stag Grande - Plum</div><div class="rcol">Graduate Collection · stags</div></div>
</div>
- <div class="room" id="room17">
- <img class="rimg" src="assets/room/r17.jpg" alt="Stag Grande Teal room" />
+ <div class="room" id="room15">
+ <img class="rimg" src="assets/room/r15.jpg" alt="Stag Grande Teal room" />
<div class="rtint"></div>
<div class="rcap"><div class="rpat">Stag Grande Teal</div><div class="rcol">Graduate Collection · stags</div></div>
</div>
- <div class="room" id="room18">
- <img class="rimg" src="assets/room/r18.jpg" alt="Stag Grande Grey room" />
+ <div class="room" id="room16">
+ <img class="rimg" src="assets/room/r16.jpg" alt="Stag Grande Grey room" />
<div class="rtint"></div>
<div class="rcap"><div class="rpat">Stag Grande Grey</div><div class="rcol">Graduate Collection · stags</div></div>
</div>
- <div class="room" id="room19">
- <img class="rimg" src="assets/room/r19.jpg" alt="Small Stag Teal room" />
+ <div class="room" id="room17">
+ <img class="rimg" src="assets/room/r17.jpg" alt="Small Stag Teal room" />
<div class="rtint"></div>
<div class="rcap"><div class="rpat">Small Stag Teal</div><div class="rcol">Graduate Collection · stags</div></div>
</div>
- <div class="room" id="room20">
- <img class="rimg" src="assets/room/r20.jpg" alt="Dipped In Moonlight Charcoal room" />
+ <div class="room" id="room18">
+ <img class="rimg" src="assets/room/r18.jpg" alt="Dipped In Moonlight Charcoal room" />
<div class="rtint"></div>
<div class="rcap"><div class="rpat">Dipped In Moonlight Charcoal</div><div class="rcol">Graduate Collection · stags</div></div>
</div>
- <div class="room" id="room21">
- <img class="rimg" src="assets/room/r21.jpg" alt="Dipped In Moonlight Cream room" />
+ <div class="room" id="room19">
+ <img class="rimg" src="assets/room/r19.jpg" alt="Dipped In Moonlight Cream room" />
<div class="rtint"></div>
<div class="rcap"><div class="rpat">Dipped In Moonlight Cream</div><div class="rcol">Graduate Collection · stags</div></div>
</div>
- <div class="room" id="room22">
- <img class="rimg" src="assets/room/r22.jpg" alt="Dipped In Moonlight Teal room" />
+ <div class="room" id="room20">
+ <img class="rimg" src="assets/room/r20.jpg" alt="Dipped In Moonlight Teal room" />
<div class="rtint"></div>
<div class="rcap"><div class="rpat">Dipped In Moonlight Teal</div><div class="rcol">Graduate Collection · stags</div></div>
</div>
@@ -202,75 +192,67 @@
<div class="face back"></div>
</div>
<div class="leaf" id="leaf5">
- <div class="face front"><img class="art" src="assets/img/p5.jpg" alt="Cheetah - Brown" /><div class="shade"></div></div>
+ <div class="face front"><img class="art" src="assets/img/p5.jpg" alt="Visitorian - Taupe" /><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="Cheetah Brown" /><div class="shade"></div></div>
+ <div class="face front"><img class="art" src="assets/img/p6.jpg" alt="Visitorian Navy" /><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="Visitorian - Taupe" /><div class="shade"></div></div>
+ <div class="face front"><img class="art" src="assets/img/p7.jpg" alt="Visitorian Mauve" /><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="Visitorian Navy" /><div class="shade"></div></div>
+ <div class="face front"><img class="art" src="assets/img/p8.jpg" alt="Visitorian Blue" /><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="Visitorian Mauve" /><div class="shade"></div></div>
+ <div class="face front"><img class="art" src="assets/img/p9.jpg" alt="Jolly Boy Dog & Friends" /><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="Visitorian Blue" /><div class="shade"></div></div>
+ <div class="face front"><img class="art" src="assets/img/p10.jpg" alt="Steampunk Notice Board" /><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="Jolly Boy Dog & Friends" /><div class="shade"></div></div>
+ <div class="face front"><img class="art" src="assets/img/p11.jpg" alt="Portarait Gallery Taupe" /><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="Steampunk Notice Board" /><div class="shade"></div></div>
+ <div class="face front"><img class="art" src="assets/img/p12.jpg" alt="Dachshund Dog" /><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="Portarait Gallery Taupe" /><div class="shade"></div></div>
+ <div class="face front"><img class="art" src="assets/img/p13.jpg" alt="Colonel Fox at the Gentleman's Club - Mustard" /><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="Dachshund Dog" /><div class="shade"></div></div>
+ <div class="face front"><img class="art" src="assets/img/p14.jpg" alt="Stag Grande - Plum" /><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="Colonel Fox at the Gentleman's Club - Mustard" /><div class="shade"></div></div>
+ <div class="face front"><img class="art" src="assets/img/p15.jpg" alt="Stag Grande Teal" /><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="Stag Grande - Plum" /><div class="shade"></div></div>
+ <div class="face front"><img class="art" src="assets/img/p16.jpg" alt="Stag Grande Grey" /><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="Stag Grande Teal" /><div class="shade"></div></div>
+ <div class="face front"><img class="art" src="assets/img/p17.jpg" alt="Small Stag Teal" /><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="Stag Grande Grey" /><div class="shade"></div></div>
+ <div class="face front"><img class="art" src="assets/img/p18.jpg" alt="Dipped In Moonlight Charcoal" /><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="Small Stag Teal" /><div class="shade"></div></div>
+ <div class="face front"><img class="art" src="assets/img/p19.jpg" alt="Dipped In Moonlight Cream" /><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="Dipped In Moonlight Charcoal" /><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="Dipped In Moonlight Cream" /><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="Dipped In Moonlight Teal" /><div class="shade"></div></div>
+ <div class="face front"><img class="art" src="assets/img/p20.jpg" alt="Dipped In Moonlight Teal" /><div class="shade"></div></div>
<div class="face back"></div>
</div>
</div>
@@ -281,41 +263,39 @@
<div class="url">designerwallcoverings.com</div>
</div>
- <audio id="bgm" src="assets/audio/jazz.wav" data-start="0" data-duration="29.6" data-track-index="20" data-volume="0.2"></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="5.75" data-track-index="22" data-volume="1"></audio>
- <audio id="vo2" src="assets/audio/vo3.wav" data-start="8.6" data-track-index="23" data-volume="1"></audio>
- <audio id="vo3" src="assets/audio/vo4.wav" data-start="17.15" data-track-index="24" data-volume="1"></audio>
- <audio id="vo4" src="assets/audio/vo5.wav" data-start="23.9" data-track-index="25" data-volume="1"></audio>
- <audio id="vo5" src="assets/audio/vo6.wav" data-start="26.75" data-track-index="26" data-volume="1"></audio>
+ <audio id="bgm" src="assets/audio/jazz.wav" data-start="0" data-duration="48.2" data-track-index="20" data-volume="0.2"></audio>
+ <audio id="vo0" src="assets/audio/vo1.wav" data-start="2.7" data-track-index="21" data-volume="1"></audio>
+ <audio id="vo1" src="assets/audio/vo2.wav" data-start="8.9" data-track-index="22" data-volume="1"></audio>
+ <audio id="vo2" src="assets/audio/vo3.wav" data-start="10.8" data-track-index="23" data-volume="1"></audio>
+ <audio id="vo3" src="assets/audio/vo4.wav" data-start="27.9" data-track-index="24" data-volume="1"></audio>
+ <audio id="vo4" src="assets/audio/vo5.wav" data-start="41.3" data-track-index="25" data-volume="1"></audio>
+ <audio id="vo5" src="assets/audio/vo6.wav" data-start="44.85" data-track-index="26" data-volume="1"></audio>
<script>
window.__timelines = window.__timelines || {};
const tl = gsap.timeline({ paused: true });
- gsap.set("#leaf0", { rotateY:0, zIndex:23 });
- gsap.set("#leaf1", { rotateY:0, zIndex:22 });
- gsap.set("#leaf2", { rotateY:0, zIndex:21 });
- gsap.set("#leaf3", { rotateY:0, zIndex:20 });
- gsap.set("#leaf4", { rotateY:0, zIndex:19 });
- gsap.set("#leaf5", { rotateY:0, zIndex:18 });
- gsap.set("#leaf6", { rotateY:0, zIndex:17 });
- gsap.set("#leaf7", { rotateY:0, zIndex:16 });
- gsap.set("#leaf8", { rotateY:0, zIndex:15 });
- gsap.set("#leaf9", { rotateY:0, zIndex:14 });
- gsap.set("#leaf10", { rotateY:0, zIndex:13 });
- gsap.set("#leaf11", { rotateY:0, zIndex:12 });
- gsap.set("#leaf12", { rotateY:0, zIndex:11 });
- gsap.set("#leaf13", { rotateY:0, zIndex:10 });
- gsap.set("#leaf14", { rotateY:0, zIndex:9 });
- gsap.set("#leaf15", { rotateY:0, zIndex:8 });
- gsap.set("#leaf16", { rotateY:0, zIndex:7 });
- gsap.set("#leaf17", { rotateY:0, zIndex:6 });
- gsap.set("#leaf18", { rotateY:0, zIndex:5 });
- gsap.set("#leaf19", { rotateY:0, zIndex:4 });
- gsap.set("#leaf20", { rotateY:0, zIndex:3 });
- gsap.set("#leaf21", { rotateY:0, zIndex:2 });
- gsap.set("#leaf22", { rotateY:0, zIndex:1 });
+ gsap.set("#leaf0", { rotateY:0, zIndex:21 });
+ gsap.set("#leaf1", { rotateY:0, zIndex:20 });
+ gsap.set("#leaf2", { rotateY:0, zIndex:19 });
+ gsap.set("#leaf3", { rotateY:0, zIndex:18 });
+ gsap.set("#leaf4", { rotateY:0, zIndex:17 });
+ gsap.set("#leaf5", { rotateY:0, zIndex:16 });
+ gsap.set("#leaf6", { rotateY:0, zIndex:15 });
+ gsap.set("#leaf7", { rotateY:0, zIndex:14 });
+ gsap.set("#leaf8", { rotateY:0, zIndex:13 });
+ gsap.set("#leaf9", { rotateY:0, zIndex:12 });
+ gsap.set("#leaf10", { rotateY:0, zIndex:11 });
+ gsap.set("#leaf11", { rotateY:0, zIndex:10 });
+ gsap.set("#leaf12", { rotateY:0, zIndex:9 });
+ gsap.set("#leaf13", { rotateY:0, zIndex:8 });
+ gsap.set("#leaf14", { rotateY:0, zIndex:7 });
+ gsap.set("#leaf15", { rotateY:0, zIndex:6 });
+ gsap.set("#leaf16", { rotateY:0, zIndex:5 });
+ gsap.set("#leaf17", { rotateY:0, zIndex:4 });
+ gsap.set("#leaf18", { rotateY:0, zIndex:3 });
+ gsap.set("#leaf19", { rotateY:0, zIndex:2 });
+ gsap.set("#leaf20", { rotateY:0, zIndex:1 });
gsap.set("#room0", { opacity:1 });
gsap.set("#room1", { opacity:0 });
gsap.set("#room2", { opacity:0 });
@@ -337,8 +317,6 @@
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("#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 });
@@ -347,188 +325,174 @@
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);
+ tl.to("#cover", { opacity:0, duration:0.5, ease:"power1.in" }, 2.00);
+ tl.to("#stage", { opacity:1, duration:0.6, ease:"power1.out" }, 2.00);
// 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 .art", { scale: 1.05, duration: 3.20, ease:"power1.out" }, 23.8);
- tl.to("#room22 .rimg", { scale: 1.06, duration: 3.20, ease:"power1.out" }, 23.8);
+ tl.to("#leaf0", { rotateY: -180, duration: 1.1, ease: "power2.inOut" }, 3.2);
+ tl.to("#leaf0 .shade", { opacity: 0.5, duration: 0.550, ease:"power1.in" }, 3.2);
+ tl.to("#leaf0 .shade", { opacity: 0, duration: 0.550, ease:"power1.out" }, 3.75);
+ tl.set("#leaf0", { zIndex: 1000 }, 3.75);
+ tl.set("#leaf0", { opacity: 0 }, 4.300);
+ tl.to("#room0", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 3.75);
+ tl.to("#room1", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 3.75);
+ tl.to("#leaf1", { rotateY: -180, duration: 1.1, ease: "power2.inOut" }, 5.1);
+ tl.to("#leaf1 .shade", { opacity: 0.5, duration: 0.550, ease:"power1.in" }, 5.1);
+ tl.to("#leaf1 .shade", { opacity: 0, duration: 0.550, ease:"power1.out" }, 5.65);
+ tl.set("#leaf1", { zIndex: 1001 }, 5.65);
+ tl.set("#leaf1", { opacity: 0 }, 6.200);
+ tl.to("#room1", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 5.65);
+ tl.to("#room2", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 5.65);
+ tl.to("#leaf2", { rotateY: -180, duration: 1.1, ease: "power2.inOut" }, 7);
+ tl.to("#leaf2 .shade", { opacity: 0.5, duration: 0.550, ease:"power1.in" }, 7);
+ tl.to("#leaf2 .shade", { opacity: 0, duration: 0.550, ease:"power1.out" }, 7.55);
+ tl.set("#leaf2", { zIndex: 1002 }, 7.55);
+ tl.set("#leaf2", { opacity: 0 }, 8.100);
+ tl.to("#room2", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 7.55);
+ tl.to("#room3", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 7.55);
+ tl.to("#leaf3", { rotateY: -180, duration: 1.1, ease: "power2.inOut" }, 8.9);
+ tl.to("#leaf3 .shade", { opacity: 0.5, duration: 0.550, ease:"power1.in" }, 8.9);
+ tl.to("#leaf3 .shade", { opacity: 0, duration: 0.550, ease:"power1.out" }, 9.45);
+ tl.set("#leaf3", { zIndex: 1003 }, 9.45);
+ tl.set("#leaf3", { opacity: 0 }, 10.000);
+ tl.to("#room3", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 9.45);
+ tl.to("#room4", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 9.45);
+ tl.to("#leaf4", { rotateY: -180, duration: 1.1, ease: "power2.inOut" }, 10.8);
+ tl.to("#leaf4 .shade", { opacity: 0.5, duration: 0.550, ease:"power1.in" }, 10.8);
+ tl.to("#leaf4 .shade", { opacity: 0, duration: 0.550, ease:"power1.out" }, 11.35);
+ tl.set("#leaf4", { zIndex: 1004 }, 11.35);
+ tl.set("#leaf4", { opacity: 0 }, 11.900);
+ tl.to("#room4", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 11.35);
+ tl.to("#room5", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 11.35);
+ tl.to("#leaf5", { rotateY: -180, duration: 1.1, ease: "power2.inOut" }, 12.7);
+ tl.to("#leaf5 .shade", { opacity: 0.5, duration: 0.550, ease:"power1.in" }, 12.7);
+ tl.to("#leaf5 .shade", { opacity: 0, duration: 0.550, ease:"power1.out" }, 13.25);
+ tl.set("#leaf5", { zIndex: 1005 }, 13.25);
+ tl.set("#leaf5", { opacity: 0 }, 13.800);
+ tl.to("#room5", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 13.25);
+ tl.to("#room6", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 13.25);
+ tl.to("#leaf6", { rotateY: -180, duration: 1.1, ease: "power2.inOut" }, 14.6);
+ tl.to("#leaf6 .shade", { opacity: 0.5, duration: 0.550, ease:"power1.in" }, 14.6);
+ tl.to("#leaf6 .shade", { opacity: 0, duration: 0.550, ease:"power1.out" }, 15.15);
+ tl.set("#leaf6", { zIndex: 1006 }, 15.15);
+ tl.set("#leaf6", { opacity: 0 }, 15.700);
+ tl.to("#room6", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 15.15);
+ tl.to("#room7", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 15.15);
+ tl.to("#leaf7", { rotateY: -180, duration: 1.1, ease: "power2.inOut" }, 16.5);
+ tl.to("#leaf7 .shade", { opacity: 0.5, duration: 0.550, ease:"power1.in" }, 16.5);
+ tl.to("#leaf7 .shade", { opacity: 0, duration: 0.550, ease:"power1.out" }, 17.05);
+ tl.set("#leaf7", { zIndex: 1007 }, 17.05);
+ tl.set("#leaf7", { opacity: 0 }, 17.600);
+ tl.to("#room7", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 17.05);
+ tl.to("#room8", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 17.05);
+ tl.to("#leaf8", { rotateY: -180, duration: 1.1, ease: "power2.inOut" }, 18.4);
+ tl.to("#leaf8 .shade", { opacity: 0.5, duration: 0.550, ease:"power1.in" }, 18.4);
+ tl.to("#leaf8 .shade", { opacity: 0, duration: 0.550, ease:"power1.out" }, 18.95);
+ tl.set("#leaf8", { zIndex: 1008 }, 18.95);
+ tl.set("#leaf8", { opacity: 0 }, 19.500);
+ tl.to("#room8", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 18.95);
+ tl.to("#room9", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 18.95);
+ tl.to("#leaf9", { rotateY: -180, duration: 1.1, ease: "power2.inOut" }, 20.3);
+ tl.to("#leaf9 .shade", { opacity: 0.5, duration: 0.550, ease:"power1.in" }, 20.3);
+ tl.to("#leaf9 .shade", { opacity: 0, duration: 0.550, ease:"power1.out" }, 20.85);
+ tl.set("#leaf9", { zIndex: 1009 }, 20.85);
+ tl.set("#leaf9", { opacity: 0 }, 21.400);
+ tl.to("#room9", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 20.85);
+ tl.to("#room10", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 20.85);
+ tl.to("#leaf10", { rotateY: -180, duration: 1.1, ease: "power2.inOut" }, 22.2);
+ tl.to("#leaf10 .shade", { opacity: 0.5, duration: 0.550, ease:"power1.in" }, 22.2);
+ tl.to("#leaf10 .shade", { opacity: 0, duration: 0.550, ease:"power1.out" }, 22.75);
+ tl.set("#leaf10", { zIndex: 1010 }, 22.75);
+ tl.set("#leaf10", { opacity: 0 }, 23.300);
+ tl.to("#room10", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 22.75);
+ tl.to("#room11", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 22.75);
+ tl.to("#leaf11", { rotateY: -180, duration: 1.1, ease: "power2.inOut" }, 24.1);
+ tl.to("#leaf11 .shade", { opacity: 0.5, duration: 0.550, ease:"power1.in" }, 24.1);
+ tl.to("#leaf11 .shade", { opacity: 0, duration: 0.550, ease:"power1.out" }, 24.65);
+ tl.set("#leaf11", { zIndex: 1011 }, 24.65);
+ tl.set("#leaf11", { opacity: 0 }, 25.200);
+ tl.to("#room11", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 24.65);
+ tl.to("#room12", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 24.65);
+ tl.to("#leaf12", { rotateY: -180, duration: 1.1, ease: "power2.inOut" }, 26);
+ tl.to("#leaf12 .shade", { opacity: 0.5, duration: 0.550, ease:"power1.in" }, 26);
+ tl.to("#leaf12 .shade", { opacity: 0, duration: 0.550, ease:"power1.out" }, 26.55);
+ tl.set("#leaf12", { zIndex: 1012 }, 26.55);
+ tl.set("#leaf12", { opacity: 0 }, 27.100);
+ tl.to("#room12", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 26.55);
+ tl.to("#room13", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 26.55);
+ tl.to("#leaf13", { rotateY: -180, duration: 1.1, ease: "power2.inOut" }, 27.9);
+ tl.to("#leaf13 .shade", { opacity: 0.5, duration: 0.550, ease:"power1.in" }, 27.9);
+ tl.to("#leaf13 .shade", { opacity: 0, duration: 0.550, ease:"power1.out" }, 28.45);
+ tl.set("#leaf13", { zIndex: 1013 }, 28.45);
+ tl.set("#leaf13", { opacity: 0 }, 29.000);
+ tl.to("#room13", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 28.45);
+ tl.to("#room14", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 28.45);
+ tl.to("#leaf14", { rotateY: -180, duration: 1.1, ease: "power2.inOut" }, 29.8);
+ tl.to("#leaf14 .shade", { opacity: 0.5, duration: 0.550, ease:"power1.in" }, 29.8);
+ tl.to("#leaf14 .shade", { opacity: 0, duration: 0.550, ease:"power1.out" }, 30.35);
+ tl.set("#leaf14", { zIndex: 1014 }, 30.35);
+ tl.set("#leaf14", { opacity: 0 }, 30.900);
+ tl.to("#room14", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 30.35);
+ tl.to("#room15", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 30.35);
+ tl.to("#leaf15", { rotateY: -180, duration: 1.1, ease: "power2.inOut" }, 31.7);
+ tl.to("#leaf15 .shade", { opacity: 0.5, duration: 0.550, ease:"power1.in" }, 31.7);
+ tl.to("#leaf15 .shade", { opacity: 0, duration: 0.550, ease:"power1.out" }, 32.25);
+ tl.set("#leaf15", { zIndex: 1015 }, 32.25);
+ tl.set("#leaf15", { opacity: 0 }, 32.800);
+ tl.to("#room15", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 32.25);
+ tl.to("#room16", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 32.25);
+ tl.to("#leaf16", { rotateY: -180, duration: 1.1, ease: "power2.inOut" }, 33.6);
+ tl.to("#leaf16 .shade", { opacity: 0.5, duration: 0.550, ease:"power1.in" }, 33.6);
+ tl.to("#leaf16 .shade", { opacity: 0, duration: 0.550, ease:"power1.out" }, 34.15);
+ tl.set("#leaf16", { zIndex: 1016 }, 34.15);
+ tl.set("#leaf16", { opacity: 0 }, 34.700);
+ tl.to("#room16", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 34.15);
+ tl.to("#room17", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 34.15);
+ tl.to("#leaf17", { rotateY: -180, duration: 1.1, ease: "power2.inOut" }, 35.5);
+ tl.to("#leaf17 .shade", { opacity: 0.5, duration: 0.550, ease:"power1.in" }, 35.5);
+ tl.to("#leaf17 .shade", { opacity: 0, duration: 0.550, ease:"power1.out" }, 36.05);
+ tl.set("#leaf17", { zIndex: 1017 }, 36.05);
+ tl.set("#leaf17", { opacity: 0 }, 36.600);
+ tl.to("#room17", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 36.05);
+ tl.to("#room18", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 36.05);
+ tl.to("#leaf18", { rotateY: -180, duration: 1.1, ease: "power2.inOut" }, 37.4);
+ tl.to("#leaf18 .shade", { opacity: 0.5, duration: 0.550, ease:"power1.in" }, 37.4);
+ tl.to("#leaf18 .shade", { opacity: 0, duration: 0.550, ease:"power1.out" }, 37.95);
+ tl.set("#leaf18", { zIndex: 1018 }, 37.95);
+ tl.set("#leaf18", { opacity: 0 }, 38.500);
+ tl.to("#room18", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 37.95);
+ tl.to("#room19", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 37.95);
+ tl.to("#leaf19", { rotateY: -180, duration: 1.1, ease: "power2.inOut" }, 39.3);
+ tl.to("#leaf19 .shade", { opacity: 0.5, duration: 0.550, ease:"power1.in" }, 39.3);
+ tl.to("#leaf19 .shade", { opacity: 0, duration: 0.550, ease:"power1.out" }, 39.85);
+ tl.set("#leaf19", { zIndex: 1019 }, 39.85);
+ tl.set("#leaf19", { opacity: 0 }, 40.400);
+ tl.to("#room19", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 39.85);
+ tl.to("#room20", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 39.85);
+ tl.to("#leaf20 .art", { scale: 1.05, duration: 3.90, ease:"power1.out" }, 41.2);
+ tl.to("#room20 .rimg", { scale: 1.06, duration: 3.90, ease:"power1.out" }, 41.2);
// outro
- tl.to("#stage", { opacity:0, duration:0.6, ease:"power1.in" }, 26.60);
- tl.to("#outro", { opacity:1, duration:0.5 }, 26.80);
- tl.to("#outro .big", { opacity:1, y:0, duration:0.7, ease:"power2.out" }, 27.00);
- tl.to("#outro .url", { opacity:1, duration:0.5 }, 27.50);
+ tl.to("#stage", { opacity:0, duration:0.6, ease:"power1.in" }, 44.70);
+ tl.to("#outro", { opacity:1, duration:0.5 }, 44.90);
+ tl.to("#outro .big", { opacity:1, y:0, duration:0.7, ease:"power2.out" }, 45.10);
+ tl.to("#outro .url", { opacity:1, duration:0.5 }, 45.60);
gsap.set("#bgm", { volume: 0.2 });
- tl.to("#bgm", { volume: 0.10, duration: 0.4 }, 2.10);
- tl.to("#bgm", { volume: 0.2, duration: 0.6 }, 5.00);
- tl.to("#bgm", { volume: 0.10, duration: 0.4 }, 5.45);
- tl.to("#bgm", { volume: 0.2, duration: 0.6 }, 8.35);
- tl.to("#bgm", { volume: 0.10, duration: 0.4 }, 8.30);
- tl.to("#bgm", { volume: 0.2, duration: 0.6 }, 11.20);
- tl.to("#bgm", { volume: 0.10, duration: 0.4 }, 16.85);
- tl.to("#bgm", { volume: 0.2, duration: 0.6 }, 19.75);
- tl.to("#bgm", { volume: 0.10, duration: 0.4 }, 23.60);
- tl.to("#bgm", { volume: 0.2, duration: 0.6 }, 26.50);
- tl.to("#bgm", { volume: 0.10, duration: 0.4 }, 26.45);
- tl.to("#bgm", { volume: 0.2, duration: 0.6 }, 29.35);
- tl.to("#bgm", { volume: 0, duration: 1.0, ease:"power1.in" }, 28.50);
+ tl.to("#bgm", { volume: 0.10, duration: 0.4 }, 2.40);
+ tl.to("#bgm", { volume: 0.2, duration: 0.6 }, 5.30);
+ tl.to("#bgm", { volume: 0.10, duration: 0.4 }, 8.60);
+ tl.to("#bgm", { volume: 0.2, duration: 0.6 }, 11.50);
+ tl.to("#bgm", { volume: 0.10, duration: 0.4 }, 10.50);
+ tl.to("#bgm", { volume: 0.2, duration: 0.6 }, 13.40);
+ tl.to("#bgm", { volume: 0.10, duration: 0.4 }, 27.60);
+ tl.to("#bgm", { volume: 0.2, duration: 0.6 }, 30.50);
+ tl.to("#bgm", { volume: 0.10, duration: 0.4 }, 41.00);
+ tl.to("#bgm", { volume: 0.2, duration: 0.6 }, 43.90);
+ tl.to("#bgm", { volume: 0.10, duration: 0.4 }, 44.55);
+ tl.to("#bgm", { volume: 0.2, duration: 0.6 }, 47.45);
+ tl.to("#bgm", { volume: 0, duration: 1.0, ease:"power1.in" }, 47.10);
window.__timelines["flipbook"] = tl;
</script>
diff --git a/public/collections/graduate-collection.html b/public/collections/graduate-collection.html
index f50d22c..184c5f9 100644
--- a/public/collections/graduate-collection.html
+++ b/public/collections/graduate-collection.html
@@ -58,12 +58,12 @@
<!-- FLIP BOOK, directly below the banner -->
<div class="wrap">
- <div class="section-label">The Flip Book · 41 seconds · narrated</div>
+ <div class="section-label">The Flip Book · narrated</div>
<div class="film">
<video controls playsinline preload="metadata" poster="/public/collections/graduate-poster.jpg">
<source src="/reels/graduate-collection-flipbook.mp4" type="video/mp4">
</video>
- <div class="note">🔊 <b>Sound on</b> — leaf through all 23 patterns, narrated in Steve Abrams' voice.</div>
+ <div class="note">🔊 <b>Sound on</b> — leaf through all 21 patterns, narrated in Steve Abrams' voice.</div>
</div>
</div>
← 892ea6d chore: untrack regenerable flipbook artifacts + version bump
·
back to Dw Marketing Reels
·
Graduate flipbook: combined all-clean set (55 patterns, both 839a744 →