← back to Dw Marketing Reels
Graduate flipbook: slow another 50% (124s)
d6bc7a13eabdc6fffb874d774fea6a0f3ad176b1 · 2026-07-30 11:57:01 -0700 · Steve Abrams
Files touched
M flipbooks/graduate-collection/index.html
Diff
commit d6bc7a13eabdc6fffb874d774fea6a0f3ad176b1
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Thu Jul 30 11:57:01 2026 -0700
Graduate flipbook: slow another 50% (124s)
---
flipbooks/graduate-collection/index.html | 804 +++++++++++++++----------------
1 file changed, 402 insertions(+), 402 deletions(-)
diff --git a/flipbooks/graduate-collection/index.html b/flipbooks/graduate-collection/index.html
index f915469..13d2257 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="85.8">
+ <div id="main-composition" data-composition-id="flipbook" data-width="1920" data-height="1080" data-start="0" data-duration="124.2">
<div class="card" id="cover">
<div class="kicker">Designer Wallcoverings presents</div>
@@ -569,13 +569,13 @@
<div class="url">designerwallcoverings.com</div>
</div>
- <audio id="bgm" src="assets/audio/jazz.wav" data-start="0" data-duration="85.8" data-track-index="20" data-volume="0.2"></audio>
+ <audio id="bgm" src="assets/audio/jazz.wav" data-start="0" data-duration="124.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="7.4" data-track-index="22" data-volume="1"></audio>
- <audio id="vo2" src="assets/audio/vo3.wav" data-start="10.2" data-track-index="23" data-volume="1"></audio>
- <audio id="vo3" src="assets/audio/vo4.wav" data-start="60.6" data-track-index="24" data-volume="1"></audio>
- <audio id="vo4" src="assets/audio/vo5.wav" data-start="78.9" data-track-index="25" data-volume="1"></audio>
- <audio id="vo5" src="assets/audio/vo6.wav" data-start="82.45" data-track-index="26" data-volume="1"></audio>
+ <audio id="vo1" src="assets/audio/vo2.wav" data-start="9.5" 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="89.3" data-track-index="24" data-volume="1"></audio>
+ <audio id="vo4" src="assets/audio/vo5.wav" data-start="116.7" data-track-index="25" data-volume="1"></audio>
+ <audio id="vo5" src="assets/audio/vo6.wav" data-start="120.55" data-track-index="26" data-volume="1"></audio>
<script>
window.__timelines = window.__timelines || {};
@@ -704,407 +704,407 @@
// page turns + room crossfades
- tl.to("#leaf0", { rotateY: -180, duration: 0.9, ease: "power2.inOut" }, 3.2);
- tl.to("#leaf0 .shade", { opacity: 0.5, duration: 0.450, ease:"power1.in" }, 3.2);
- tl.to("#leaf0 .shade", { opacity: 0, duration: 0.450, ease:"power1.out" }, 3.65);
- tl.set("#leaf0", { zIndex: 1000 }, 3.65);
- tl.set("#leaf0", { opacity: 0 }, 4.100);
- tl.to("#room0", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 3.65);
- tl.to("#room1", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 3.65);
- tl.to("#leaf1", { rotateY: -180, duration: 0.9, ease: "power2.inOut" }, 4.6);
- tl.to("#leaf1 .shade", { opacity: 0.5, duration: 0.450, ease:"power1.in" }, 4.6);
- tl.to("#leaf1 .shade", { opacity: 0, duration: 0.450, ease:"power1.out" }, 5.05);
- tl.set("#leaf1", { zIndex: 1001 }, 5.05);
- tl.set("#leaf1", { opacity: 0 }, 5.500);
- tl.to("#room1", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 5.05);
- tl.to("#room2", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 5.05);
- tl.to("#leaf2", { rotateY: -180, duration: 0.9, ease: "power2.inOut" }, 6);
- tl.to("#leaf2 .shade", { opacity: 0.5, duration: 0.450, ease:"power1.in" }, 6);
- tl.to("#leaf2 .shade", { opacity: 0, duration: 0.450, ease:"power1.out" }, 6.45);
- tl.set("#leaf2", { zIndex: 1002 }, 6.45);
- tl.set("#leaf2", { opacity: 0 }, 6.900);
- tl.to("#room2", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 6.45);
- tl.to("#room3", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 6.45);
- tl.to("#leaf3", { rotateY: -180, duration: 0.9, ease: "power2.inOut" }, 7.4);
- tl.to("#leaf3 .shade", { opacity: 0.5, duration: 0.450, ease:"power1.in" }, 7.4);
- tl.to("#leaf3 .shade", { opacity: 0, duration: 0.450, ease:"power1.out" }, 7.85);
- tl.set("#leaf3", { zIndex: 1003 }, 7.85);
- tl.set("#leaf3", { opacity: 0 }, 8.300);
- tl.to("#room3", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 7.85);
- tl.to("#room4", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 7.85);
- tl.to("#leaf4", { rotateY: -180, duration: 0.9, ease: "power2.inOut" }, 8.8);
- tl.to("#leaf4 .shade", { opacity: 0.5, duration: 0.450, ease:"power1.in" }, 8.8);
- tl.to("#leaf4 .shade", { opacity: 0, duration: 0.450, ease:"power1.out" }, 9.25);
- tl.set("#leaf4", { zIndex: 1004 }, 9.25);
- tl.set("#leaf4", { opacity: 0 }, 9.700);
- tl.to("#room4", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 9.25);
- tl.to("#room5", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 9.25);
- tl.to("#leaf5", { rotateY: -180, duration: 0.9, ease: "power2.inOut" }, 10.2);
- tl.to("#leaf5 .shade", { opacity: 0.5, duration: 0.450, ease:"power1.in" }, 10.2);
- tl.to("#leaf5 .shade", { opacity: 0, duration: 0.450, ease:"power1.out" }, 10.65);
- tl.set("#leaf5", { zIndex: 1005 }, 10.65);
- tl.set("#leaf5", { opacity: 0 }, 11.100);
- tl.to("#room5", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 10.65);
- tl.to("#room6", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 10.65);
- tl.to("#leaf6", { rotateY: -180, duration: 0.9, ease: "power2.inOut" }, 11.6);
- tl.to("#leaf6 .shade", { opacity: 0.5, duration: 0.450, ease:"power1.in" }, 11.6);
- tl.to("#leaf6 .shade", { opacity: 0, duration: 0.450, ease:"power1.out" }, 12.05);
- tl.set("#leaf6", { zIndex: 1006 }, 12.05);
- tl.set("#leaf6", { opacity: 0 }, 12.500);
- tl.to("#room6", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 12.05);
- tl.to("#room7", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 12.05);
- tl.to("#leaf7", { rotateY: -180, duration: 0.9, ease: "power2.inOut" }, 13);
- tl.to("#leaf7 .shade", { opacity: 0.5, duration: 0.450, ease:"power1.in" }, 13);
- tl.to("#leaf7 .shade", { opacity: 0, duration: 0.450, ease:"power1.out" }, 13.45);
- tl.set("#leaf7", { zIndex: 1007 }, 13.45);
- tl.set("#leaf7", { opacity: 0 }, 13.900);
- tl.to("#room7", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 13.45);
- tl.to("#room8", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 13.45);
- tl.to("#leaf8", { rotateY: -180, duration: 0.9, ease: "power2.inOut" }, 14.4);
- tl.to("#leaf8 .shade", { opacity: 0.5, duration: 0.450, ease:"power1.in" }, 14.4);
- tl.to("#leaf8 .shade", { opacity: 0, duration: 0.450, ease:"power1.out" }, 14.85);
- tl.set("#leaf8", { zIndex: 1008 }, 14.85);
- tl.set("#leaf8", { opacity: 0 }, 15.300);
- tl.to("#room8", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 14.85);
- tl.to("#room9", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 14.85);
- tl.to("#leaf9", { rotateY: -180, duration: 0.9, ease: "power2.inOut" }, 15.8);
- tl.to("#leaf9 .shade", { opacity: 0.5, duration: 0.450, ease:"power1.in" }, 15.8);
- tl.to("#leaf9 .shade", { opacity: 0, duration: 0.450, ease:"power1.out" }, 16.25);
- tl.set("#leaf9", { zIndex: 1009 }, 16.25);
- tl.set("#leaf9", { opacity: 0 }, 16.700);
- tl.to("#room9", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 16.25);
- tl.to("#room10", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 16.25);
- tl.to("#leaf10", { rotateY: -180, duration: 0.9, ease: "power2.inOut" }, 17.2);
- tl.to("#leaf10 .shade", { opacity: 0.5, duration: 0.450, ease:"power1.in" }, 17.2);
- tl.to("#leaf10 .shade", { opacity: 0, duration: 0.450, ease:"power1.out" }, 17.65);
- tl.set("#leaf10", { zIndex: 1010 }, 17.65);
- tl.set("#leaf10", { opacity: 0 }, 18.100);
- tl.to("#room10", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 17.65);
- tl.to("#room11", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 17.65);
- tl.to("#leaf11", { rotateY: -180, duration: 0.9, ease: "power2.inOut" }, 18.6);
- tl.to("#leaf11 .shade", { opacity: 0.5, duration: 0.450, ease:"power1.in" }, 18.6);
- tl.to("#leaf11 .shade", { opacity: 0, duration: 0.450, ease:"power1.out" }, 19.05);
- tl.set("#leaf11", { zIndex: 1011 }, 19.05);
- tl.set("#leaf11", { opacity: 0 }, 19.500);
- tl.to("#room11", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 19.05);
- tl.to("#room12", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 19.05);
- tl.to("#leaf12", { rotateY: -180, duration: 0.9, ease: "power2.inOut" }, 20);
- tl.to("#leaf12 .shade", { opacity: 0.5, duration: 0.450, ease:"power1.in" }, 20);
- tl.to("#leaf12 .shade", { opacity: 0, duration: 0.450, ease:"power1.out" }, 20.45);
- tl.set("#leaf12", { zIndex: 1012 }, 20.45);
- tl.set("#leaf12", { opacity: 0 }, 20.900);
- tl.to("#room12", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 20.45);
- tl.to("#room13", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 20.45);
- tl.to("#leaf13", { rotateY: -180, duration: 0.9, ease: "power2.inOut" }, 21.4);
- tl.to("#leaf13 .shade", { opacity: 0.5, duration: 0.450, ease:"power1.in" }, 21.4);
- tl.to("#leaf13 .shade", { opacity: 0, duration: 0.450, ease:"power1.out" }, 21.85);
- tl.set("#leaf13", { zIndex: 1013 }, 21.85);
- tl.set("#leaf13", { opacity: 0 }, 22.300);
- tl.to("#room13", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 21.85);
- tl.to("#room14", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 21.85);
- tl.to("#leaf14", { rotateY: -180, duration: 0.9, ease: "power2.inOut" }, 22.8);
- tl.to("#leaf14 .shade", { opacity: 0.5, duration: 0.450, ease:"power1.in" }, 22.8);
- tl.to("#leaf14 .shade", { opacity: 0, duration: 0.450, ease:"power1.out" }, 23.25);
- tl.set("#leaf14", { zIndex: 1014 }, 23.25);
- tl.set("#leaf14", { opacity: 0 }, 23.700);
- tl.to("#room14", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 23.25);
- tl.to("#room15", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 23.25);
- tl.to("#leaf15", { rotateY: -180, duration: 0.9, ease: "power2.inOut" }, 24.2);
- tl.to("#leaf15 .shade", { opacity: 0.5, duration: 0.450, ease:"power1.in" }, 24.2);
- tl.to("#leaf15 .shade", { opacity: 0, duration: 0.450, ease:"power1.out" }, 24.65);
- tl.set("#leaf15", { zIndex: 1015 }, 24.65);
- tl.set("#leaf15", { opacity: 0 }, 25.100);
- tl.to("#room15", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 24.65);
- tl.to("#room16", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 24.65);
- tl.to("#leaf16", { rotateY: -180, duration: 0.9, ease: "power2.inOut" }, 25.6);
- tl.to("#leaf16 .shade", { opacity: 0.5, duration: 0.450, ease:"power1.in" }, 25.6);
- tl.to("#leaf16 .shade", { opacity: 0, duration: 0.450, ease:"power1.out" }, 26.05);
- tl.set("#leaf16", { zIndex: 1016 }, 26.05);
- tl.set("#leaf16", { opacity: 0 }, 26.500);
- tl.to("#room16", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 26.05);
- tl.to("#room17", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 26.05);
- tl.to("#leaf17", { rotateY: -180, duration: 0.9, ease: "power2.inOut" }, 27);
- tl.to("#leaf17 .shade", { opacity: 0.5, duration: 0.450, ease:"power1.in" }, 27);
- tl.to("#leaf17 .shade", { opacity: 0, duration: 0.450, ease:"power1.out" }, 27.45);
- tl.set("#leaf17", { zIndex: 1017 }, 27.45);
- tl.set("#leaf17", { opacity: 0 }, 27.900);
- tl.to("#room17", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 27.45);
- tl.to("#room18", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 27.45);
- tl.to("#leaf18", { rotateY: -180, duration: 0.9, ease: "power2.inOut" }, 28.4);
- tl.to("#leaf18 .shade", { opacity: 0.5, duration: 0.450, ease:"power1.in" }, 28.4);
- tl.to("#leaf18 .shade", { opacity: 0, duration: 0.450, ease:"power1.out" }, 28.85);
- tl.set("#leaf18", { zIndex: 1018 }, 28.85);
- tl.set("#leaf18", { opacity: 0 }, 29.300);
- tl.to("#room18", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 28.85);
- tl.to("#room19", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 28.85);
- tl.to("#leaf19", { rotateY: -180, duration: 0.9, ease: "power2.inOut" }, 29.8);
- tl.to("#leaf19 .shade", { opacity: 0.5, duration: 0.450, ease:"power1.in" }, 29.8);
- tl.to("#leaf19 .shade", { opacity: 0, duration: 0.450, ease:"power1.out" }, 30.25);
- tl.set("#leaf19", { zIndex: 1019 }, 30.25);
- tl.set("#leaf19", { opacity: 0 }, 30.700);
- tl.to("#room19", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 30.25);
- tl.to("#room20", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 30.25);
- tl.to("#leaf20", { rotateY: -180, duration: 0.9, ease: "power2.inOut" }, 31.2);
- tl.to("#leaf20 .shade", { opacity: 0.5, duration: 0.450, ease:"power1.in" }, 31.2);
- tl.to("#leaf20 .shade", { opacity: 0, duration: 0.450, ease:"power1.out" }, 31.65);
- tl.set("#leaf20", { zIndex: 1020 }, 31.65);
- tl.set("#leaf20", { opacity: 0 }, 32.100);
- tl.to("#room20", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 31.65);
- tl.to("#room21", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 31.65);
- tl.to("#leaf21", { rotateY: -180, duration: 0.9, ease: "power2.inOut" }, 32.6);
- tl.to("#leaf21 .shade", { opacity: 0.5, duration: 0.450, ease:"power1.in" }, 32.6);
- tl.to("#leaf21 .shade", { opacity: 0, duration: 0.450, ease:"power1.out" }, 33.05);
- tl.set("#leaf21", { zIndex: 1021 }, 33.05);
- tl.set("#leaf21", { opacity: 0 }, 33.500);
- tl.to("#room21", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 33.05);
- tl.to("#room22", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 33.05);
- tl.to("#leaf22", { rotateY: -180, duration: 0.9, ease: "power2.inOut" }, 34);
- tl.to("#leaf22 .shade", { opacity: 0.5, duration: 0.450, ease:"power1.in" }, 34);
- tl.to("#leaf22 .shade", { opacity: 0, duration: 0.450, ease:"power1.out" }, 34.45);
- tl.set("#leaf22", { zIndex: 1022 }, 34.45);
- tl.set("#leaf22", { opacity: 0 }, 34.900);
- tl.to("#room22", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 34.45);
- tl.to("#room23", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 34.45);
- tl.to("#leaf23", { rotateY: -180, duration: 0.9, ease: "power2.inOut" }, 35.4);
- tl.to("#leaf23 .shade", { opacity: 0.5, duration: 0.450, ease:"power1.in" }, 35.4);
- tl.to("#leaf23 .shade", { opacity: 0, duration: 0.450, ease:"power1.out" }, 35.85);
- tl.set("#leaf23", { zIndex: 1023 }, 35.85);
- tl.set("#leaf23", { opacity: 0 }, 36.300);
- tl.to("#room23", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 35.85);
- tl.to("#room24", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 35.85);
- tl.to("#leaf24", { rotateY: -180, duration: 0.9, ease: "power2.inOut" }, 36.8);
- tl.to("#leaf24 .shade", { opacity: 0.5, duration: 0.450, ease:"power1.in" }, 36.8);
- tl.to("#leaf24 .shade", { opacity: 0, duration: 0.450, ease:"power1.out" }, 37.25);
- tl.set("#leaf24", { zIndex: 1024 }, 37.25);
- tl.set("#leaf24", { opacity: 0 }, 37.700);
- tl.to("#room24", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 37.25);
- tl.to("#room25", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 37.25);
- tl.to("#leaf25", { rotateY: -180, duration: 0.9, ease: "power2.inOut" }, 38.2);
- tl.to("#leaf25 .shade", { opacity: 0.5, duration: 0.450, ease:"power1.in" }, 38.2);
- tl.to("#leaf25 .shade", { opacity: 0, duration: 0.450, ease:"power1.out" }, 38.65);
- tl.set("#leaf25", { zIndex: 1025 }, 38.65);
- tl.set("#leaf25", { opacity: 0 }, 39.100);
- tl.to("#room25", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 38.65);
- tl.to("#room26", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 38.65);
- tl.to("#leaf26", { rotateY: -180, duration: 0.9, ease: "power2.inOut" }, 39.6);
- tl.to("#leaf26 .shade", { opacity: 0.5, duration: 0.450, ease:"power1.in" }, 39.6);
- tl.to("#leaf26 .shade", { opacity: 0, duration: 0.450, ease:"power1.out" }, 40.05);
- tl.set("#leaf26", { zIndex: 1026 }, 40.05);
- tl.set("#leaf26", { opacity: 0 }, 40.500);
- tl.to("#room26", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 40.05);
- tl.to("#room27", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 40.05);
- tl.to("#leaf27", { rotateY: -180, duration: 0.9, ease: "power2.inOut" }, 41);
- tl.to("#leaf27 .shade", { opacity: 0.5, duration: 0.450, ease:"power1.in" }, 41);
- tl.to("#leaf27 .shade", { opacity: 0, duration: 0.450, ease:"power1.out" }, 41.45);
- tl.set("#leaf27", { zIndex: 1027 }, 41.45);
- tl.set("#leaf27", { opacity: 0 }, 41.900);
- tl.to("#room27", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 41.45);
- tl.to("#room28", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 41.45);
- tl.to("#leaf28", { rotateY: -180, duration: 0.9, ease: "power2.inOut" }, 42.4);
- tl.to("#leaf28 .shade", { opacity: 0.5, duration: 0.450, ease:"power1.in" }, 42.4);
- tl.to("#leaf28 .shade", { opacity: 0, duration: 0.450, ease:"power1.out" }, 42.85);
- tl.set("#leaf28", { zIndex: 1028 }, 42.85);
- tl.set("#leaf28", { opacity: 0 }, 43.300);
- tl.to("#room28", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 42.85);
- tl.to("#room29", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 42.85);
- tl.to("#leaf29", { rotateY: -180, duration: 0.9, ease: "power2.inOut" }, 43.8);
- tl.to("#leaf29 .shade", { opacity: 0.5, duration: 0.450, ease:"power1.in" }, 43.8);
- tl.to("#leaf29 .shade", { opacity: 0, duration: 0.450, ease:"power1.out" }, 44.25);
- tl.set("#leaf29", { zIndex: 1029 }, 44.25);
- tl.set("#leaf29", { opacity: 0 }, 44.700);
- tl.to("#room29", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 44.25);
- tl.to("#room30", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 44.25);
- tl.to("#leaf30", { rotateY: -180, duration: 0.9, ease: "power2.inOut" }, 45.2);
- tl.to("#leaf30 .shade", { opacity: 0.5, duration: 0.450, ease:"power1.in" }, 45.2);
- tl.to("#leaf30 .shade", { opacity: 0, duration: 0.450, ease:"power1.out" }, 45.65);
- tl.set("#leaf30", { zIndex: 1030 }, 45.65);
- tl.set("#leaf30", { opacity: 0 }, 46.100);
- tl.to("#room30", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 45.65);
- tl.to("#room31", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 45.65);
- tl.to("#leaf31", { rotateY: -180, duration: 0.9, ease: "power2.inOut" }, 46.6);
- tl.to("#leaf31 .shade", { opacity: 0.5, duration: 0.450, ease:"power1.in" }, 46.6);
- tl.to("#leaf31 .shade", { opacity: 0, duration: 0.450, ease:"power1.out" }, 47.05);
- tl.set("#leaf31", { zIndex: 1031 }, 47.05);
- tl.set("#leaf31", { opacity: 0 }, 47.500);
- tl.to("#room31", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 47.05);
- tl.to("#room32", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 47.05);
- tl.to("#leaf32", { rotateY: -180, duration: 0.9, ease: "power2.inOut" }, 48);
- tl.to("#leaf32 .shade", { opacity: 0.5, duration: 0.450, ease:"power1.in" }, 48);
- tl.to("#leaf32 .shade", { opacity: 0, duration: 0.450, ease:"power1.out" }, 48.45);
- tl.set("#leaf32", { zIndex: 1032 }, 48.45);
- tl.set("#leaf32", { opacity: 0 }, 48.900);
- tl.to("#room32", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 48.45);
- tl.to("#room33", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 48.45);
- tl.to("#leaf33", { rotateY: -180, duration: 0.9, ease: "power2.inOut" }, 49.4);
- tl.to("#leaf33 .shade", { opacity: 0.5, duration: 0.450, ease:"power1.in" }, 49.4);
- tl.to("#leaf33 .shade", { opacity: 0, duration: 0.450, ease:"power1.out" }, 49.85);
- tl.set("#leaf33", { zIndex: 1033 }, 49.85);
- tl.set("#leaf33", { opacity: 0 }, 50.300);
- tl.to("#room33", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 49.85);
- tl.to("#room34", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 49.85);
- tl.to("#leaf34", { rotateY: -180, duration: 0.9, ease: "power2.inOut" }, 50.8);
- tl.to("#leaf34 .shade", { opacity: 0.5, duration: 0.450, ease:"power1.in" }, 50.8);
- tl.to("#leaf34 .shade", { opacity: 0, duration: 0.450, ease:"power1.out" }, 51.25);
- tl.set("#leaf34", { zIndex: 1034 }, 51.25);
- tl.set("#leaf34", { opacity: 0 }, 51.700);
- tl.to("#room34", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 51.25);
- tl.to("#room35", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 51.25);
- tl.to("#leaf35", { rotateY: -180, duration: 0.9, ease: "power2.inOut" }, 52.2);
- tl.to("#leaf35 .shade", { opacity: 0.5, duration: 0.450, ease:"power1.in" }, 52.2);
- tl.to("#leaf35 .shade", { opacity: 0, duration: 0.450, ease:"power1.out" }, 52.65);
- tl.set("#leaf35", { zIndex: 1035 }, 52.65);
- tl.set("#leaf35", { opacity: 0 }, 53.100);
- tl.to("#room35", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 52.65);
- tl.to("#room36", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 52.65);
- tl.to("#leaf36", { rotateY: -180, duration: 0.9, ease: "power2.inOut" }, 53.6);
- tl.to("#leaf36 .shade", { opacity: 0.5, duration: 0.450, ease:"power1.in" }, 53.6);
- tl.to("#leaf36 .shade", { opacity: 0, duration: 0.450, ease:"power1.out" }, 54.05);
- tl.set("#leaf36", { zIndex: 1036 }, 54.05);
- tl.set("#leaf36", { opacity: 0 }, 54.500);
- tl.to("#room36", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 54.05);
- tl.to("#room37", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 54.05);
- tl.to("#leaf37", { rotateY: -180, duration: 0.9, ease: "power2.inOut" }, 55);
- tl.to("#leaf37 .shade", { opacity: 0.5, duration: 0.450, ease:"power1.in" }, 55);
- tl.to("#leaf37 .shade", { opacity: 0, duration: 0.450, ease:"power1.out" }, 55.45);
- tl.set("#leaf37", { zIndex: 1037 }, 55.45);
- tl.set("#leaf37", { opacity: 0 }, 55.900);
- tl.to("#room37", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 55.45);
- tl.to("#room38", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 55.45);
- tl.to("#leaf38", { rotateY: -180, duration: 0.9, ease: "power2.inOut" }, 56.4);
- tl.to("#leaf38 .shade", { opacity: 0.5, duration: 0.450, ease:"power1.in" }, 56.4);
- tl.to("#leaf38 .shade", { opacity: 0, duration: 0.450, ease:"power1.out" }, 56.85);
- tl.set("#leaf38", { zIndex: 1038 }, 56.85);
- tl.set("#leaf38", { opacity: 0 }, 57.300);
- tl.to("#room38", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 56.85);
- tl.to("#room39", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 56.85);
- tl.to("#leaf39", { rotateY: -180, duration: 0.9, ease: "power2.inOut" }, 57.8);
- tl.to("#leaf39 .shade", { opacity: 0.5, duration: 0.450, ease:"power1.in" }, 57.8);
- tl.to("#leaf39 .shade", { opacity: 0, duration: 0.450, ease:"power1.out" }, 58.25);
- tl.set("#leaf39", { zIndex: 1039 }, 58.25);
- tl.set("#leaf39", { opacity: 0 }, 58.700);
- tl.to("#room39", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 58.25);
- tl.to("#room40", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 58.25);
- tl.to("#leaf40", { rotateY: -180, duration: 0.9, ease: "power2.inOut" }, 59.2);
- tl.to("#leaf40 .shade", { opacity: 0.5, duration: 0.450, ease:"power1.in" }, 59.2);
- tl.to("#leaf40 .shade", { opacity: 0, duration: 0.450, ease:"power1.out" }, 59.65);
- tl.set("#leaf40", { zIndex: 1040 }, 59.65);
- tl.set("#leaf40", { opacity: 0 }, 60.100);
- tl.to("#room40", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 59.65);
- tl.to("#room41", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 59.65);
- tl.to("#leaf41", { rotateY: -180, duration: 0.9, ease: "power2.inOut" }, 60.6);
- tl.to("#leaf41 .shade", { opacity: 0.5, duration: 0.450, ease:"power1.in" }, 60.6);
- tl.to("#leaf41 .shade", { opacity: 0, duration: 0.450, ease:"power1.out" }, 61.05);
- tl.set("#leaf41", { zIndex: 1041 }, 61.05);
- tl.set("#leaf41", { opacity: 0 }, 61.500);
- tl.to("#room41", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 61.05);
- tl.to("#room42", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 61.05);
- tl.to("#leaf42", { rotateY: -180, duration: 0.9, ease: "power2.inOut" }, 62);
- tl.to("#leaf42 .shade", { opacity: 0.5, duration: 0.450, ease:"power1.in" }, 62);
- tl.to("#leaf42 .shade", { opacity: 0, duration: 0.450, ease:"power1.out" }, 62.45);
- tl.set("#leaf42", { zIndex: 1042 }, 62.45);
- tl.set("#leaf42", { opacity: 0 }, 62.900);
- tl.to("#room42", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 62.45);
- tl.to("#room43", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 62.45);
- tl.to("#leaf43", { rotateY: -180, duration: 0.9, ease: "power2.inOut" }, 63.4);
- tl.to("#leaf43 .shade", { opacity: 0.5, duration: 0.450, ease:"power1.in" }, 63.4);
- tl.to("#leaf43 .shade", { opacity: 0, duration: 0.450, ease:"power1.out" }, 63.85);
- tl.set("#leaf43", { zIndex: 1043 }, 63.85);
- tl.set("#leaf43", { opacity: 0 }, 64.300);
- tl.to("#room43", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 63.85);
- tl.to("#room44", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 63.85);
- tl.to("#leaf44", { rotateY: -180, duration: 0.9, ease: "power2.inOut" }, 64.8);
- tl.to("#leaf44 .shade", { opacity: 0.5, duration: 0.450, ease:"power1.in" }, 64.8);
- tl.to("#leaf44 .shade", { opacity: 0, duration: 0.450, ease:"power1.out" }, 65.25);
- tl.set("#leaf44", { zIndex: 1044 }, 65.25);
- tl.set("#leaf44", { opacity: 0 }, 65.700);
- tl.to("#room44", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 65.25);
- tl.to("#room45", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 65.25);
- tl.to("#leaf45", { rotateY: -180, duration: 0.9, ease: "power2.inOut" }, 66.2);
- tl.to("#leaf45 .shade", { opacity: 0.5, duration: 0.450, ease:"power1.in" }, 66.2);
- tl.to("#leaf45 .shade", { opacity: 0, duration: 0.450, ease:"power1.out" }, 66.65);
- tl.set("#leaf45", { zIndex: 1045 }, 66.65);
- tl.set("#leaf45", { opacity: 0 }, 67.100);
- tl.to("#room45", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 66.65);
- tl.to("#room46", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 66.65);
- tl.to("#leaf46", { rotateY: -180, duration: 0.9, ease: "power2.inOut" }, 67.6);
- tl.to("#leaf46 .shade", { opacity: 0.5, duration: 0.450, ease:"power1.in" }, 67.6);
- tl.to("#leaf46 .shade", { opacity: 0, duration: 0.450, ease:"power1.out" }, 68.05);
- tl.set("#leaf46", { zIndex: 1046 }, 68.05);
- tl.set("#leaf46", { opacity: 0 }, 68.500);
- tl.to("#room46", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 68.05);
- tl.to("#room47", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 68.05);
- tl.to("#leaf47", { rotateY: -180, duration: 0.9, ease: "power2.inOut" }, 69);
- tl.to("#leaf47 .shade", { opacity: 0.5, duration: 0.450, ease:"power1.in" }, 69);
- tl.to("#leaf47 .shade", { opacity: 0, duration: 0.450, ease:"power1.out" }, 69.45);
- tl.set("#leaf47", { zIndex: 1047 }, 69.45);
- tl.set("#leaf47", { opacity: 0 }, 69.900);
- tl.to("#room47", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 69.45);
- tl.to("#room48", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 69.45);
- tl.to("#leaf48", { rotateY: -180, duration: 0.9, ease: "power2.inOut" }, 70.4);
- tl.to("#leaf48 .shade", { opacity: 0.5, duration: 0.450, ease:"power1.in" }, 70.4);
- tl.to("#leaf48 .shade", { opacity: 0, duration: 0.450, ease:"power1.out" }, 70.85);
- tl.set("#leaf48", { zIndex: 1048 }, 70.85);
- tl.set("#leaf48", { opacity: 0 }, 71.300);
- tl.to("#room48", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 70.85);
- tl.to("#room49", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 70.85);
- tl.to("#leaf49", { rotateY: -180, duration: 0.9, ease: "power2.inOut" }, 71.8);
- tl.to("#leaf49 .shade", { opacity: 0.5, duration: 0.450, ease:"power1.in" }, 71.8);
- tl.to("#leaf49 .shade", { opacity: 0, duration: 0.450, ease:"power1.out" }, 72.25);
- tl.set("#leaf49", { zIndex: 1049 }, 72.25);
- tl.set("#leaf49", { opacity: 0 }, 72.700);
- tl.to("#room49", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 72.25);
- tl.to("#room50", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 72.25);
- tl.to("#leaf50", { rotateY: -180, duration: 0.9, ease: "power2.inOut" }, 73.2);
- tl.to("#leaf50 .shade", { opacity: 0.5, duration: 0.450, ease:"power1.in" }, 73.2);
- tl.to("#leaf50 .shade", { opacity: 0, duration: 0.450, ease:"power1.out" }, 73.65);
- tl.set("#leaf50", { zIndex: 1050 }, 73.65);
- tl.set("#leaf50", { opacity: 0 }, 74.100);
- tl.to("#room50", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 73.65);
- tl.to("#room51", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 73.65);
- tl.to("#leaf51", { rotateY: -180, duration: 0.9, ease: "power2.inOut" }, 74.6);
- tl.to("#leaf51 .shade", { opacity: 0.5, duration: 0.450, ease:"power1.in" }, 74.6);
- tl.to("#leaf51 .shade", { opacity: 0, duration: 0.450, ease:"power1.out" }, 75.05);
- tl.set("#leaf51", { zIndex: 1051 }, 75.05);
- tl.set("#leaf51", { opacity: 0 }, 75.500);
- tl.to("#room51", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 75.05);
- tl.to("#room52", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 75.05);
- tl.to("#leaf52", { rotateY: -180, duration: 0.9, ease: "power2.inOut" }, 76);
- tl.to("#leaf52 .shade", { opacity: 0.5, duration: 0.450, ease:"power1.in" }, 76);
- tl.to("#leaf52 .shade", { opacity: 0, duration: 0.450, ease:"power1.out" }, 76.45);
- tl.set("#leaf52", { zIndex: 1052 }, 76.45);
- tl.set("#leaf52", { opacity: 0 }, 76.900);
- tl.to("#room52", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 76.45);
- tl.to("#room53", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 76.45);
- tl.to("#leaf53", { rotateY: -180, duration: 0.9, ease: "power2.inOut" }, 77.4);
- tl.to("#leaf53 .shade", { opacity: 0.5, duration: 0.450, ease:"power1.in" }, 77.4);
- tl.to("#leaf53 .shade", { opacity: 0, duration: 0.450, ease:"power1.out" }, 77.85);
- tl.set("#leaf53", { zIndex: 1053 }, 77.85);
- tl.set("#leaf53", { opacity: 0 }, 78.300);
- tl.to("#room53", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 77.85);
- tl.to("#room54", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 77.85);
- tl.to("#leaf54 .art", { scale: 1.05, duration: 3.90, ease:"power1.out" }, 78.8);
- tl.to("#room54 .rimg", { scale: 1.06, duration: 3.90, ease:"power1.out" }, 78.8);
+ tl.to("#leaf0", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 3.2);
+ tl.to("#leaf0 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 3.2);
+ tl.to("#leaf0 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 3.875);
+ tl.set("#leaf0", { zIndex: 1000 }, 3.875);
+ tl.set("#leaf0", { opacity: 0 }, 4.550);
+ tl.to("#room0", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 3.875);
+ tl.to("#room1", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 3.875);
+ tl.to("#leaf1", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 5.3);
+ tl.to("#leaf1 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 5.3);
+ tl.to("#leaf1 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 5.975);
+ tl.set("#leaf1", { zIndex: 1001 }, 5.975);
+ tl.set("#leaf1", { opacity: 0 }, 6.650);
+ tl.to("#room1", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 5.975);
+ tl.to("#room2", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 5.975);
+ tl.to("#leaf2", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 7.4);
+ tl.to("#leaf2 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 7.4);
+ tl.to("#leaf2 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 8.075);
+ tl.set("#leaf2", { zIndex: 1002 }, 8.075);
+ tl.set("#leaf2", { opacity: 0 }, 8.750);
+ tl.to("#room2", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 8.075);
+ tl.to("#room3", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 8.075);
+ tl.to("#leaf3", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 9.5);
+ tl.to("#leaf3 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 9.5);
+ tl.to("#leaf3 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 10.175);
+ tl.set("#leaf3", { zIndex: 1003 }, 10.175);
+ tl.set("#leaf3", { opacity: 0 }, 10.850);
+ tl.to("#room3", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 10.175);
+ tl.to("#room4", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 10.175);
+ tl.to("#leaf4", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 11.6);
+ tl.to("#leaf4 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 11.6);
+ tl.to("#leaf4 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 12.275);
+ tl.set("#leaf4", { zIndex: 1004 }, 12.275);
+ tl.set("#leaf4", { opacity: 0 }, 12.950);
+ tl.to("#room4", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 12.275);
+ tl.to("#room5", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 12.275);
+ tl.to("#leaf5", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 13.7);
+ tl.to("#leaf5 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 13.7);
+ tl.to("#leaf5 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 14.375);
+ tl.set("#leaf5", { zIndex: 1005 }, 14.375);
+ tl.set("#leaf5", { opacity: 0 }, 15.050);
+ tl.to("#room5", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 14.375);
+ tl.to("#room6", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 14.375);
+ tl.to("#leaf6", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 15.8);
+ tl.to("#leaf6 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 15.8);
+ tl.to("#leaf6 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 16.475);
+ tl.set("#leaf6", { zIndex: 1006 }, 16.475);
+ tl.set("#leaf6", { opacity: 0 }, 17.150);
+ tl.to("#room6", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 16.475);
+ tl.to("#room7", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 16.475);
+ tl.to("#leaf7", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 17.9);
+ tl.to("#leaf7 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 17.9);
+ tl.to("#leaf7 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 18.575);
+ tl.set("#leaf7", { zIndex: 1007 }, 18.575);
+ tl.set("#leaf7", { opacity: 0 }, 19.250);
+ tl.to("#room7", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 18.575);
+ tl.to("#room8", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 18.575);
+ tl.to("#leaf8", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 20);
+ tl.to("#leaf8 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 20);
+ tl.to("#leaf8 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 20.675);
+ tl.set("#leaf8", { zIndex: 1008 }, 20.675);
+ tl.set("#leaf8", { opacity: 0 }, 21.350);
+ tl.to("#room8", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 20.675);
+ tl.to("#room9", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 20.675);
+ tl.to("#leaf9", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 22.1);
+ tl.to("#leaf9 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 22.1);
+ tl.to("#leaf9 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 22.775);
+ tl.set("#leaf9", { zIndex: 1009 }, 22.775);
+ tl.set("#leaf9", { opacity: 0 }, 23.450);
+ tl.to("#room9", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 22.775);
+ tl.to("#room10", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 22.775);
+ tl.to("#leaf10", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 24.2);
+ tl.to("#leaf10 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 24.2);
+ tl.to("#leaf10 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 24.875);
+ tl.set("#leaf10", { zIndex: 1010 }, 24.875);
+ tl.set("#leaf10", { opacity: 0 }, 25.550);
+ tl.to("#room10", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 24.875);
+ tl.to("#room11", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 24.875);
+ tl.to("#leaf11", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 26.3);
+ tl.to("#leaf11 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 26.3);
+ tl.to("#leaf11 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 26.975);
+ tl.set("#leaf11", { zIndex: 1011 }, 26.975);
+ tl.set("#leaf11", { opacity: 0 }, 27.650);
+ tl.to("#room11", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 26.975);
+ tl.to("#room12", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 26.975);
+ tl.to("#leaf12", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 28.4);
+ tl.to("#leaf12 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 28.4);
+ tl.to("#leaf12 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 29.075);
+ tl.set("#leaf12", { zIndex: 1012 }, 29.075);
+ tl.set("#leaf12", { opacity: 0 }, 29.750);
+ tl.to("#room12", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 29.075);
+ tl.to("#room13", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 29.075);
+ tl.to("#leaf13", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 30.5);
+ tl.to("#leaf13 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 30.5);
+ tl.to("#leaf13 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 31.175);
+ tl.set("#leaf13", { zIndex: 1013 }, 31.175);
+ tl.set("#leaf13", { opacity: 0 }, 31.850);
+ tl.to("#room13", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 31.175);
+ tl.to("#room14", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 31.175);
+ tl.to("#leaf14", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 32.6);
+ tl.to("#leaf14 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 32.6);
+ tl.to("#leaf14 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 33.275);
+ tl.set("#leaf14", { zIndex: 1014 }, 33.275);
+ tl.set("#leaf14", { opacity: 0 }, 33.950);
+ tl.to("#room14", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 33.275);
+ tl.to("#room15", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 33.275);
+ tl.to("#leaf15", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 34.7);
+ tl.to("#leaf15 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 34.7);
+ tl.to("#leaf15 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 35.375);
+ tl.set("#leaf15", { zIndex: 1015 }, 35.375);
+ tl.set("#leaf15", { opacity: 0 }, 36.050);
+ tl.to("#room15", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 35.375);
+ tl.to("#room16", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 35.375);
+ tl.to("#leaf16", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 36.8);
+ tl.to("#leaf16 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 36.8);
+ tl.to("#leaf16 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 37.475);
+ tl.set("#leaf16", { zIndex: 1016 }, 37.475);
+ tl.set("#leaf16", { opacity: 0 }, 38.150);
+ tl.to("#room16", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 37.475);
+ tl.to("#room17", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 37.475);
+ tl.to("#leaf17", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 38.9);
+ tl.to("#leaf17 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 38.9);
+ tl.to("#leaf17 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 39.575);
+ tl.set("#leaf17", { zIndex: 1017 }, 39.575);
+ tl.set("#leaf17", { opacity: 0 }, 40.250);
+ tl.to("#room17", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 39.575);
+ tl.to("#room18", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 39.575);
+ tl.to("#leaf18", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 41);
+ tl.to("#leaf18 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 41);
+ tl.to("#leaf18 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 41.675);
+ tl.set("#leaf18", { zIndex: 1018 }, 41.675);
+ tl.set("#leaf18", { opacity: 0 }, 42.350);
+ tl.to("#room18", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 41.675);
+ tl.to("#room19", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 41.675);
+ tl.to("#leaf19", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 43.1);
+ tl.to("#leaf19 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 43.1);
+ tl.to("#leaf19 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 43.775);
+ tl.set("#leaf19", { zIndex: 1019 }, 43.775);
+ tl.set("#leaf19", { opacity: 0 }, 44.450);
+ tl.to("#room19", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 43.775);
+ tl.to("#room20", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 43.775);
+ tl.to("#leaf20", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 45.2);
+ tl.to("#leaf20 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 45.2);
+ tl.to("#leaf20 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 45.875);
+ tl.set("#leaf20", { zIndex: 1020 }, 45.875);
+ tl.set("#leaf20", { opacity: 0 }, 46.550);
+ tl.to("#room20", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 45.875);
+ tl.to("#room21", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 45.875);
+ tl.to("#leaf21", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 47.3);
+ tl.to("#leaf21 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 47.3);
+ tl.to("#leaf21 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 47.975);
+ tl.set("#leaf21", { zIndex: 1021 }, 47.975);
+ tl.set("#leaf21", { opacity: 0 }, 48.650);
+ tl.to("#room21", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 47.975);
+ tl.to("#room22", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 47.975);
+ tl.to("#leaf22", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 49.4);
+ tl.to("#leaf22 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 49.4);
+ tl.to("#leaf22 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 50.075);
+ tl.set("#leaf22", { zIndex: 1022 }, 50.075);
+ tl.set("#leaf22", { opacity: 0 }, 50.750);
+ tl.to("#room22", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 50.075);
+ tl.to("#room23", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 50.075);
+ tl.to("#leaf23", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 51.5);
+ tl.to("#leaf23 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 51.5);
+ tl.to("#leaf23 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 52.175);
+ tl.set("#leaf23", { zIndex: 1023 }, 52.175);
+ tl.set("#leaf23", { opacity: 0 }, 52.850);
+ tl.to("#room23", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 52.175);
+ tl.to("#room24", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 52.175);
+ tl.to("#leaf24", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 53.6);
+ tl.to("#leaf24 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 53.6);
+ tl.to("#leaf24 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 54.275);
+ tl.set("#leaf24", { zIndex: 1024 }, 54.275);
+ tl.set("#leaf24", { opacity: 0 }, 54.950);
+ tl.to("#room24", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 54.275);
+ tl.to("#room25", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 54.275);
+ tl.to("#leaf25", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 55.7);
+ tl.to("#leaf25 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 55.7);
+ tl.to("#leaf25 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 56.375);
+ tl.set("#leaf25", { zIndex: 1025 }, 56.375);
+ tl.set("#leaf25", { opacity: 0 }, 57.050);
+ tl.to("#room25", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 56.375);
+ tl.to("#room26", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 56.375);
+ tl.to("#leaf26", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 57.8);
+ tl.to("#leaf26 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 57.8);
+ tl.to("#leaf26 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 58.475);
+ tl.set("#leaf26", { zIndex: 1026 }, 58.475);
+ tl.set("#leaf26", { opacity: 0 }, 59.150);
+ tl.to("#room26", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 58.475);
+ tl.to("#room27", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 58.475);
+ tl.to("#leaf27", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 59.9);
+ tl.to("#leaf27 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 59.9);
+ tl.to("#leaf27 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 60.575);
+ tl.set("#leaf27", { zIndex: 1027 }, 60.575);
+ tl.set("#leaf27", { opacity: 0 }, 61.250);
+ tl.to("#room27", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 60.575);
+ tl.to("#room28", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 60.575);
+ tl.to("#leaf28", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 62);
+ tl.to("#leaf28 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 62);
+ tl.to("#leaf28 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 62.675);
+ tl.set("#leaf28", { zIndex: 1028 }, 62.675);
+ tl.set("#leaf28", { opacity: 0 }, 63.350);
+ tl.to("#room28", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 62.675);
+ tl.to("#room29", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 62.675);
+ tl.to("#leaf29", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 64.1);
+ tl.to("#leaf29 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 64.1);
+ tl.to("#leaf29 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 64.775);
+ tl.set("#leaf29", { zIndex: 1029 }, 64.775);
+ tl.set("#leaf29", { opacity: 0 }, 65.450);
+ tl.to("#room29", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 64.775);
+ tl.to("#room30", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 64.775);
+ tl.to("#leaf30", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 66.2);
+ tl.to("#leaf30 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 66.2);
+ tl.to("#leaf30 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 66.875);
+ tl.set("#leaf30", { zIndex: 1030 }, 66.875);
+ tl.set("#leaf30", { opacity: 0 }, 67.550);
+ tl.to("#room30", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 66.875);
+ tl.to("#room31", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 66.875);
+ tl.to("#leaf31", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 68.3);
+ tl.to("#leaf31 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 68.3);
+ tl.to("#leaf31 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 68.975);
+ tl.set("#leaf31", { zIndex: 1031 }, 68.975);
+ tl.set("#leaf31", { opacity: 0 }, 69.650);
+ tl.to("#room31", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 68.975);
+ tl.to("#room32", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 68.975);
+ tl.to("#leaf32", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 70.4);
+ tl.to("#leaf32 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 70.4);
+ tl.to("#leaf32 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 71.075);
+ tl.set("#leaf32", { zIndex: 1032 }, 71.075);
+ tl.set("#leaf32", { opacity: 0 }, 71.750);
+ tl.to("#room32", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 71.075);
+ tl.to("#room33", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 71.075);
+ tl.to("#leaf33", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 72.5);
+ tl.to("#leaf33 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 72.5);
+ tl.to("#leaf33 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 73.175);
+ tl.set("#leaf33", { zIndex: 1033 }, 73.175);
+ tl.set("#leaf33", { opacity: 0 }, 73.850);
+ tl.to("#room33", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 73.175);
+ tl.to("#room34", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 73.175);
+ tl.to("#leaf34", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 74.6);
+ tl.to("#leaf34 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 74.6);
+ tl.to("#leaf34 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 75.275);
+ tl.set("#leaf34", { zIndex: 1034 }, 75.275);
+ tl.set("#leaf34", { opacity: 0 }, 75.950);
+ tl.to("#room34", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 75.275);
+ tl.to("#room35", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 75.275);
+ tl.to("#leaf35", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 76.7);
+ tl.to("#leaf35 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 76.7);
+ tl.to("#leaf35 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 77.375);
+ tl.set("#leaf35", { zIndex: 1035 }, 77.375);
+ tl.set("#leaf35", { opacity: 0 }, 78.050);
+ tl.to("#room35", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 77.375);
+ tl.to("#room36", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 77.375);
+ tl.to("#leaf36", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 78.8);
+ tl.to("#leaf36 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 78.8);
+ tl.to("#leaf36 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 79.475);
+ tl.set("#leaf36", { zIndex: 1036 }, 79.475);
+ tl.set("#leaf36", { opacity: 0 }, 80.150);
+ tl.to("#room36", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 79.475);
+ tl.to("#room37", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 79.475);
+ tl.to("#leaf37", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 80.9);
+ tl.to("#leaf37 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 80.9);
+ tl.to("#leaf37 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 81.575);
+ tl.set("#leaf37", { zIndex: 1037 }, 81.575);
+ tl.set("#leaf37", { opacity: 0 }, 82.250);
+ tl.to("#room37", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 81.575);
+ tl.to("#room38", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 81.575);
+ tl.to("#leaf38", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 83);
+ tl.to("#leaf38 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 83);
+ tl.to("#leaf38 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 83.675);
+ tl.set("#leaf38", { zIndex: 1038 }, 83.675);
+ tl.set("#leaf38", { opacity: 0 }, 84.350);
+ tl.to("#room38", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 83.675);
+ tl.to("#room39", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 83.675);
+ tl.to("#leaf39", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 85.1);
+ tl.to("#leaf39 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 85.1);
+ tl.to("#leaf39 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 85.775);
+ tl.set("#leaf39", { zIndex: 1039 }, 85.775);
+ tl.set("#leaf39", { opacity: 0 }, 86.450);
+ tl.to("#room39", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 85.775);
+ tl.to("#room40", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 85.775);
+ tl.to("#leaf40", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 87.2);
+ tl.to("#leaf40 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 87.2);
+ tl.to("#leaf40 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 87.875);
+ tl.set("#leaf40", { zIndex: 1040 }, 87.875);
+ tl.set("#leaf40", { opacity: 0 }, 88.550);
+ tl.to("#room40", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 87.875);
+ tl.to("#room41", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 87.875);
+ tl.to("#leaf41", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 89.3);
+ tl.to("#leaf41 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 89.3);
+ tl.to("#leaf41 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 89.975);
+ tl.set("#leaf41", { zIndex: 1041 }, 89.975);
+ tl.set("#leaf41", { opacity: 0 }, 90.650);
+ tl.to("#room41", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 89.975);
+ tl.to("#room42", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 89.975);
+ tl.to("#leaf42", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 91.4);
+ tl.to("#leaf42 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 91.4);
+ tl.to("#leaf42 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 92.075);
+ tl.set("#leaf42", { zIndex: 1042 }, 92.075);
+ tl.set("#leaf42", { opacity: 0 }, 92.750);
+ tl.to("#room42", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 92.075);
+ tl.to("#room43", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 92.075);
+ tl.to("#leaf43", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 93.5);
+ tl.to("#leaf43 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 93.5);
+ tl.to("#leaf43 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 94.175);
+ tl.set("#leaf43", { zIndex: 1043 }, 94.175);
+ tl.set("#leaf43", { opacity: 0 }, 94.850);
+ tl.to("#room43", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 94.175);
+ tl.to("#room44", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 94.175);
+ tl.to("#leaf44", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 95.6);
+ tl.to("#leaf44 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 95.6);
+ tl.to("#leaf44 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 96.275);
+ tl.set("#leaf44", { zIndex: 1044 }, 96.275);
+ tl.set("#leaf44", { opacity: 0 }, 96.950);
+ tl.to("#room44", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 96.275);
+ tl.to("#room45", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 96.275);
+ tl.to("#leaf45", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 97.7);
+ tl.to("#leaf45 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 97.7);
+ tl.to("#leaf45 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 98.375);
+ tl.set("#leaf45", { zIndex: 1045 }, 98.375);
+ tl.set("#leaf45", { opacity: 0 }, 99.050);
+ tl.to("#room45", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 98.375);
+ tl.to("#room46", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 98.375);
+ tl.to("#leaf46", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 99.8);
+ tl.to("#leaf46 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 99.8);
+ tl.to("#leaf46 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 100.475);
+ tl.set("#leaf46", { zIndex: 1046 }, 100.475);
+ tl.set("#leaf46", { opacity: 0 }, 101.150);
+ tl.to("#room46", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 100.475);
+ tl.to("#room47", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 100.475);
+ tl.to("#leaf47", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 101.9);
+ tl.to("#leaf47 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 101.9);
+ tl.to("#leaf47 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 102.575);
+ tl.set("#leaf47", { zIndex: 1047 }, 102.575);
+ tl.set("#leaf47", { opacity: 0 }, 103.250);
+ tl.to("#room47", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 102.575);
+ tl.to("#room48", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 102.575);
+ tl.to("#leaf48", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 104);
+ tl.to("#leaf48 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 104);
+ tl.to("#leaf48 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 104.675);
+ tl.set("#leaf48", { zIndex: 1048 }, 104.675);
+ tl.set("#leaf48", { opacity: 0 }, 105.350);
+ tl.to("#room48", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 104.675);
+ tl.to("#room49", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 104.675);
+ tl.to("#leaf49", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 106.1);
+ tl.to("#leaf49 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 106.1);
+ tl.to("#leaf49 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 106.775);
+ tl.set("#leaf49", { zIndex: 1049 }, 106.775);
+ tl.set("#leaf49", { opacity: 0 }, 107.450);
+ tl.to("#room49", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 106.775);
+ tl.to("#room50", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 106.775);
+ tl.to("#leaf50", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 108.2);
+ tl.to("#leaf50 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 108.2);
+ tl.to("#leaf50 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 108.875);
+ tl.set("#leaf50", { zIndex: 1050 }, 108.875);
+ tl.set("#leaf50", { opacity: 0 }, 109.550);
+ tl.to("#room50", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 108.875);
+ tl.to("#room51", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 108.875);
+ tl.to("#leaf51", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 110.3);
+ tl.to("#leaf51 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 110.3);
+ tl.to("#leaf51 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 110.975);
+ tl.set("#leaf51", { zIndex: 1051 }, 110.975);
+ tl.set("#leaf51", { opacity: 0 }, 111.650);
+ tl.to("#room51", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 110.975);
+ tl.to("#room52", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 110.975);
+ tl.to("#leaf52", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 112.4);
+ tl.to("#leaf52 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 112.4);
+ tl.to("#leaf52 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 113.075);
+ tl.set("#leaf52", { zIndex: 1052 }, 113.075);
+ tl.set("#leaf52", { opacity: 0 }, 113.750);
+ tl.to("#room52", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 113.075);
+ tl.to("#room53", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 113.075);
+ tl.to("#leaf53", { rotateY: -180, duration: 1.35, ease: "power2.inOut" }, 114.5);
+ tl.to("#leaf53 .shade", { opacity: 0.5, duration: 0.675, ease:"power1.in" }, 114.5);
+ tl.to("#leaf53 .shade", { opacity: 0, duration: 0.675, ease:"power1.out" }, 115.175);
+ tl.set("#leaf53", { zIndex: 1053 }, 115.175);
+ tl.set("#leaf53", { opacity: 0 }, 115.850);
+ tl.to("#room53", { opacity: 0, duration: 0.4, ease:"power1.inOut" }, 115.175);
+ tl.to("#room54", { opacity: 1, duration: 0.4, ease:"power1.inOut" }, 115.175);
+ tl.to("#leaf54 .art", { scale: 1.05, duration: 4.20, ease:"power1.out" }, 116.6);
+ tl.to("#room54 .rimg", { scale: 1.06, duration: 4.20, ease:"power1.out" }, 116.6);
// outro
- tl.to("#stage", { opacity:0, duration:0.6, ease:"power1.in" }, 82.30);
- tl.to("#outro", { opacity:1, duration:0.5 }, 82.50);
- tl.to("#outro .big", { opacity:1, y:0, duration:0.7, ease:"power2.out" }, 82.70);
- tl.to("#outro .url", { opacity:1, duration:0.5 }, 83.20);
+ tl.to("#stage", { opacity:0, duration:0.6, ease:"power1.in" }, 120.40);
+ tl.to("#outro", { opacity:1, duration:0.5 }, 120.60);
+ tl.to("#outro .big", { opacity:1, y:0, duration:0.7, ease:"power2.out" }, 120.80);
+ tl.to("#outro .url", { opacity:1, duration:0.5 }, 121.30);
gsap.set("#bgm", { volume: 0.2 });
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 }, 7.10);
- tl.to("#bgm", { volume: 0.2, duration: 0.6 }, 10.00);
- tl.to("#bgm", { volume: 0.10, duration: 0.4 }, 9.90);
- tl.to("#bgm", { volume: 0.2, duration: 0.6 }, 12.80);
- tl.to("#bgm", { volume: 0.10, duration: 0.4 }, 60.30);
- tl.to("#bgm", { volume: 0.2, duration: 0.6 }, 63.20);
- tl.to("#bgm", { volume: 0.10, duration: 0.4 }, 78.60);
- tl.to("#bgm", { volume: 0.2, duration: 0.6 }, 81.50);
- tl.to("#bgm", { volume: 0.10, duration: 0.4 }, 82.15);
- tl.to("#bgm", { volume: 0.2, duration: 0.6 }, 85.05);
- tl.to("#bgm", { volume: 0, duration: 1.0, ease:"power1.in" }, 84.70);
+ tl.to("#bgm", { volume: 0.10, duration: 0.4 }, 9.20);
+ tl.to("#bgm", { volume: 0.2, duration: 0.6 }, 12.10);
+ tl.to("#bgm", { volume: 0.10, duration: 0.4 }, 13.40);
+ tl.to("#bgm", { volume: 0.2, duration: 0.6 }, 16.30);
+ tl.to("#bgm", { volume: 0.10, duration: 0.4 }, 89.00);
+ tl.to("#bgm", { volume: 0.2, duration: 0.6 }, 91.90);
+ tl.to("#bgm", { volume: 0.10, duration: 0.4 }, 116.40);
+ tl.to("#bgm", { volume: 0.2, duration: 0.6 }, 119.30);
+ tl.to("#bgm", { volume: 0.10, duration: 0.4 }, 120.25);
+ tl.to("#bgm", { volume: 0.2, duration: 0.6 }, 123.15);
+ tl.to("#bgm", { volume: 0, duration: 1.0, ease:"power1.in" }, 123.10);
window.__timelines["flipbook"] = tl;
</script>
← c1e6f34 record: pre-edit backup of live theme dw-collection-hero.liq
·
back to Dw Marketing Reels
·
Graduate flipbook: bottom-left speed+volume sliders + downlo f62526c →