← back to Dw Marketing Reels
Graduate flipbook: combined all-clean set (55 patterns, both vendor tags), 86s
839a7441285175646016606dc2ce693070d37804 · 2026-07-30 11:34:54 -0700 · Steve Abrams
Files touched
A data/graduate-combined.jsonM flipbooks/graduate-collection/index.htmlM public/collections/graduate-collection.html
Diff
commit 839a7441285175646016606dc2ce693070d37804
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Thu Jul 30 11:34:54 2026 -0700
Graduate flipbook: combined all-clean set (55 patterns, both vendor tags), 86s
---
data/graduate-combined.json | 497 ++++++++++++
flipbooks/graduate-collection/index.html | 1078 +++++++++++++++++++++------
public/collections/graduate-collection.html | 2 +-
3 files changed, 1343 insertions(+), 234 deletions(-)
diff --git a/data/graduate-combined.json b/data/graduate-combined.json
new file mode 100644
index 0000000..0d65afa
--- /dev/null
+++ b/data/graduate-combined.json
@@ -0,0 +1,497 @@
+[
+ {
+ "title": "All Over Leopard - Blue",
+ "handle": "copy-of-exotic-tiger-wallpaper-charcoal",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/AlloverLeopardCharcoal.png?v=1709835248",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/AlloverLeopardCharcoalRoom.png?v=1709835248",
+ "has_room": true,
+ "chapter": "big cats",
+ "vendor": "Graduate Collection UK"
+ },
+ {
+ "title": "All Over Leopard Blue",
+ "handle": "copy-of-all-over-leopard-blue",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/Screenshot2025-06-24at12.37.36PM.png?v=1750793883",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/AlloverLeopardCharcoalRoom_e9a4799e-903c-417e-99b9-158270cc5cfd.png?v=1750793863",
+ "has_room": true,
+ "chapter": "big cats",
+ "vendor": "Graduate Collection UK"
+ },
+ {
+ "title": "All Over Leopard Charcoal",
+ "handle": "copy-of-all-over-leopard-charcoal",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/Screenshot2025-06-24at12.36.31PM.png?v=1750793823",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/Screenshot2025-06-24at12.36.55PM.png?v=1750793822",
+ "has_room": true,
+ "chapter": "big cats",
+ "vendor": "Graduate Collection UK"
+ },
+ {
+ "title": "All Over Leopard - Aubergine",
+ "handle": "all-over-leopard-aubergine-graduate-collection",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/B48C9B51-6F0D-4973-985F-992BBF14F800.jpg?v=1772164893",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/A902549B-ECE0-4410-8226-32E31F07196B.jpg?v=1772164893",
+ "has_room": true,
+ "chapter": "big cats",
+ "vendor": "Graduate Collection UK"
+ },
+ {
+ "title": "All Over Leopard - Brown",
+ "handle": "all-over-leopard-brown-graduate-collection",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/80F7ADF4-D400-4D78-89E2-E8024E0C12EB.jpg?v=1772164915",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/9B0CD372-BE5E-4886-9E91-0574F2BADC00.jpg?v=1772164915",
+ "has_room": true,
+ "chapter": "big cats",
+ "vendor": "Graduate Collection UK"
+ },
+ {
+ "title": "Leopard Brown",
+ "handle": "leopard-brown-graduate-collection",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/80F7ADF4-D400-4D78-89E2-E8024E0C12EB_f0e70547-6d49-4051-974f-a3d29f49e320.jpg?v=1775598515",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/80F7ADF4-D400-4D78-89E2-E8024E0C12EB_f0e70547-6d49-4051-974f-a3d29f49e320.jpg?v=1775598515",
+ "has_room": false,
+ "chapter": "big cats",
+ "vendor": "Graduate Collection"
+ },
+ {
+ "title": "Visitorian - Taupe",
+ "handle": "visitorian-wallpaper",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Graduate_Collection_wallpaper_trade_book_Page_06_Image_0001.jpg?v=1570091053",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/ScreenShot2021-10-08at4.01.27PM.png?v=1633734145",
+ "has_room": true,
+ "chapter": "characters",
+ "vendor": "Graduate Collection UK"
+ },
+ {
+ "title": "Visitorian Navy",
+ "handle": "visitorian-wallpaper-1",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Graduate_Collection_wallpaper_trade_book_Page_06_Image_0002.jpg?v=1570091053",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Graduate_Collection_wallpaper_trade_book_Page_06_Image_0002.jpg?v=1570091053",
+ "has_room": false,
+ "chapter": "characters",
+ "vendor": "Graduate Collection UK"
+ },
+ {
+ "title": "Visitorian Mauve",
+ "handle": "visitorian-wallpaper-2",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Graduate_Collection_wallpaper_trade_book_Page_06_Image_0003.jpg?v=1570091053",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Graduate_Collection_wallpaper_trade_book_Page_06_Image_0003.jpg?v=1570091053",
+ "has_room": false,
+ "chapter": "characters",
+ "vendor": "Graduate Collection UK"
+ },
+ {
+ "title": "Visitorian Blue",
+ "handle": "visitorian-wallpaper-3",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Graduate_Collection_wallpaper_trade_book_Page_06_Image_0004.jpg?v=1570091053",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/ScreenShot2021-10-08at3.49.25PM.png?v=1633733413",
+ "has_room": true,
+ "chapter": "characters",
+ "vendor": "Graduate Collection UK"
+ },
+ {
+ "title": "Jolly Boy Dog & Friends",
+ "handle": "jolly-boy-friends-wallpaper",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/Screenshot2025-05-12at7.30.51AM.png?v=1747060405",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/Screenshot2025-05-12at7.31.52AM.png?v=1747060363",
+ "has_room": true,
+ "chapter": "characters",
+ "vendor": "Graduate Collection UK"
+ },
+ {
+ "title": "Steampunk Notice Board",
+ "handle": "steampunk-notice-board-wallpaper",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Graduate_Collection_wallpaper_trade_book_Page_07_Image_0002.jpg?v=1612388486",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/QqjaFxcfRPyeCGYhD9G3_steampunk_notice_board_insitu_grande_7d8d9494-189c-43cb-9488-24944ce782b8.jpg?v=1612388487",
+ "has_room": true,
+ "chapter": "characters",
+ "vendor": "Graduate Collection UK"
+ },
+ {
+ "title": "Portarait Gallery Taupe",
+ "handle": "dwc-1001302",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Portarait_Gallery_Taupe_1.jpg?v=1602006843",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Portarait_Gallery_Taupe_1.jpg?v=1602006843",
+ "has_room": false,
+ "chapter": "characters",
+ "vendor": "Graduate Collection UK"
+ },
+ {
+ "title": "Dachshund Dog",
+ "handle": "copy-of-dachshund-natural",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/NEWDachshund_NATURAL.jpg?v=1750792583",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DachshundNaturalRoom_dce6601a-c864-4764-b024-8e4d2ac7b818.png?v=1750792583",
+ "has_room": true,
+ "chapter": "characters",
+ "vendor": "Graduate Collection UK"
+ },
+ {
+ "title": "Colonel Fox at the Gentleman's Club - Mustard",
+ "handle": "grd-8900-designerwallcoverings-com",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/GRD-8900-DesignerWallcoverings-Los-Angeles-1_e3102e92-3911-4763-8ffd-1bb3d218d57e.jpg?v=1730485220",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/Gentlemans_Club_Mustard.png?v=1730485289",
+ "has_room": true,
+ "chapter": "characters",
+ "vendor": "Graduate Collection UK"
+ },
+ {
+ "title": "Fashionista Tinted",
+ "handle": "visitorian-fashionista-wallpaper",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Graduate_Collection_wallpaper_trade_book_Page_07_Image_0004.jpg?v=1570091053",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/hCdYg71Rm1VQjlktJ1lA_Charlotte_cory_fashionista_wallpaper_roomset_grande_280e48d5-09d9-46fe-becb-43b86046f011.jpg?v=1570091054",
+ "has_room": true,
+ "chapter": "characters",
+ "vendor": "Graduate Collection"
+ },
+ {
+ "title": "Fashionista Black & White",
+ "handle": "visitorian-fashionista-wallpaper-1",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Graduate_Collection_wallpaper_trade_book_Page_07_Image_0005.jpg?v=1570091053",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/wyqj6AS0QX6xhm67PvOg_Charlotte_Cory_-_Fashionista_black___white_wallpaper_grande_2c2fac20-d910-402f-bf3a-1b896e520fb8.jpg?v=1570091054",
+ "has_room": true,
+ "chapter": "characters",
+ "vendor": "Graduate Collection"
+ },
+ {
+ "title": "Rabbit Rabbit Rabbit",
+ "handle": "rabbit-rabbit-rabbit-wallpaper",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Graduate_Collection_wallpaper_trade_book_Page_07_Image_0003.jpg?v=1572310841",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/MVPwIVSsSJ6IiSxGdW0I_rabbit_rabbit_rabbit_insitu_grande_142657d9-0884-44f7-b0a3-c284dafbae19.jpg?v=1572310841",
+ "has_room": true,
+ "chapter": "characters",
+ "vendor": "Graduate Collection"
+ },
+ {
+ "title": "Showgirls Metallic Gold & Black",
+ "handle": "showgirls-wallpaper",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/ScreenShot2023-09-11at1.53.19PM.png?v=1694465646",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/ScreenShot2023-09-11at1.53.12PM.png?v=1694465625",
+ "has_room": true,
+ "chapter": "characters",
+ "vendor": "Graduate Collection"
+ },
+ {
+ "title": "Showgirls Metallic Mustard & Cream",
+ "handle": "showgirls-wallpaper-3",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/ScreenShot2023-09-11at1.49.13PM.png?v=1694465405",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/ScreenShot2021-10-08at11.42.05AM.png?v=1694465398",
+ "has_room": true,
+ "chapter": "characters",
+ "vendor": "Graduate Collection"
+ },
+ {
+ "title": "Showgirls Metallic Pink & Black",
+ "handle": "showgirls-wallpaper-4",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/Showgirls_MetallicPink_Black.jpg?v=1730488614",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/GRD-87020-DesignerWallcoverings-Los-Angeles-1.png?v=1694465676",
+ "has_room": true,
+ "chapter": "characters",
+ "vendor": "Graduate Collection"
+ },
+ {
+ "title": "Portrait Gallery Navy",
+ "handle": "dwc-1001303",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Portrait_Gallery_Navy_2.jpg?v=1602006845",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Portrait_Gallery_Navy_2.jpg?v=1602006845",
+ "has_room": false,
+ "chapter": "characters",
+ "vendor": "Graduate Collection"
+ },
+ {
+ "title": "Showgirls Metallic Bronze & Cream",
+ "handle": "showgirls-wallpaper-metallic-bronze-cream",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/Showgirls_MetallicBronze_Cream_1024x1024_3f9df313-e6aa-40c7-adac-97b90df0b067.jpg?v=1730488554",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/ScreenShot2023-09-11at1.33.07PM.png?v=1694464431",
+ "has_room": true,
+ "chapter": "characters",
+ "vendor": "Graduate Collection"
+ },
+ {
+ "title": "Showgirls Metallic Pink & Cream",
+ "handle": "showgirls-wallpaper-metallic-pink-cream",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/ScreenShot2023-09-11at1.37.57PM.png?v=1694465689",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/ScreenShot2023-09-11at1.38.05PM.png?v=1694464738",
+ "has_room": true,
+ "chapter": "characters",
+ "vendor": "Graduate Collection"
+ },
+ {
+ "title": "Showgirls Metallic Teal & Black",
+ "handle": "showgirls-wallpaper-metallic-teal-black",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/Showgirls_MetallicTeal_Black.jpg?v=1730488416",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/ScreenShot2023-09-11at1.42.16PM.png?v=1694464957",
+ "has_room": true,
+ "chapter": "characters",
+ "vendor": "Graduate Collection"
+ },
+ {
+ "title": "Showgirls Metallic Teal & Cream",
+ "handle": "showgirls-wallpaper-teal-cream",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/Showgirls_MetallicTeal_Cream_1024x1024_ba6114de-6784-4aa7-ac31-0f45ffecb3ec.jpg?v=1730488356",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/ScreenShot2023-09-11at1.45.39PM.png?v=1694465204",
+ "has_room": true,
+ "chapter": "characters",
+ "vendor": "Graduate Collection"
+ },
+ {
+ "title": "Showgirls Metallic Bronze & Black",
+ "handle": "showgirls-wallpaper-metallic-bronze-black-1",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/ScreenShot2023-09-11at1.51.20PM.png?v=1694465520",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/Showgirls_MetallicBronze_Black.jpg?v=1730488254",
+ "has_room": true,
+ "chapter": "characters",
+ "vendor": "Graduate Collection"
+ },
+ {
+ "title": "Cavalcade Of Cats Blue",
+ "handle": "copy-of-cavalcade-of-cats-blue",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/ACavalcadeofCatsblue_fa62827d-3eb7-4812-982a-5ef6150ee8f3.png?v=1730484646",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/ACavalcadeofCatsblueroom_0264483b-3df5-48ca-a4e4-0227be6ccfeb.png?v=1730484646",
+ "has_room": true,
+ "chapter": "characters",
+ "vendor": "Graduate Collection"
+ },
+ {
+ "title": "Cavalcade Of Cats Mustard",
+ "handle": "copy-of-cavalcade-of-cats-mustard",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/ACavalcadeofCatsmustard_122455d1-6d9e-4092-bc80-3cc2cd0868b6.png?v=1730484639",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/ACavalcadeofCatsmustardroom_a24237f0-6336-4e09-9363-dd56e0bd8261.png?v=1730484639",
+ "has_room": true,
+ "chapter": "characters",
+ "vendor": "Graduate Collection"
+ },
+ {
+ "title": "Cavalcade Of Cats Red",
+ "handle": "dipped-in-moonlight-charcoal",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/ACavalcadeofCatsred_18a38a54-b823-4ac2-a1b8-87ee5d1f77ba.png?v=1730484633",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/ACavalcadeofCatsredroom_24cc4ace-220e-44e5-baaa-8e5b45352ec5.png?v=1730484633",
+ "has_room": true,
+ "chapter": "characters",
+ "vendor": "Graduate Collection"
+ },
+ {
+ "title": "Top Dog Cream",
+ "handle": "copy-of-top-dog-cream",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/TopDogCream_252e8492-113b-46a6-ac5c-558b2a6693bd.png?v=1730484609",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/TopDogCreamRoom_32e3d309-1b1e-4f35-aedc-112ca25c9228.png?v=1730484609",
+ "has_room": true,
+ "chapter": "characters",
+ "vendor": "Graduate Collection"
+ },
+ {
+ "title": "Top Dog Grey",
+ "handle": "copy-of-top-dog-grey",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/TopDogGrey_d06cfc3e-a80f-49c2-b203-8e42a86b1b58.png?v=1730484602",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/TopDogGreyRoom_8641f7a0-a5bd-4256-ad2e-47f5595dc4e7.png?v=1730484602",
+ "has_room": true,
+ "chapter": "characters",
+ "vendor": "Graduate Collection"
+ },
+ {
+ "title": "At The Art Gallery Burgundy",
+ "handle": "copy-of-at-the-art-gallery-burgundy",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/AttheArtGalleryBurgundy_4f783d0d-251c-43a2-9519-72ee14418169.png?v=1730484596",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/AttheArtGalleryBurgundyroom_cffd75f2-e080-4835-9f37-cdb52caa165e.png?v=1730484596",
+ "has_room": true,
+ "chapter": "characters",
+ "vendor": "Graduate Collection"
+ },
+ {
+ "title": "At The Art Gallery Charcoal",
+ "handle": "copy-of-at-the-art-gallery-charcoal",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/AttheArtGalleryCharcoal_b0e9858f-c4ee-46b7-b6e5-6c37739a23c1.png?v=1730484591",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/AttheArtGalleryCharcoalroom_d9e4cfe7-bd89-401b-9942-8b11bf89473d.png?v=1730484591",
+ "has_room": true,
+ "chapter": "characters",
+ "vendor": "Graduate Collection"
+ },
+ {
+ "title": "At The Art Gallery Teal",
+ "handle": "copy-of-at-the-art-gallery-teal",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/AttheArtGalleryteal_d8dd0ab4-a676-4120-9ed7-a55f46f02724.png?v=1730484584",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/AttheArtGallerytealroom_6b1945f9-f9dd-4808-9254-81ed6963a351.png?v=1730484584",
+ "has_room": true,
+ "chapter": "characters",
+ "vendor": "Graduate Collection"
+ },
+ {
+ "title": "Top Dog",
+ "handle": "dwgr-11001-top-dog",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/Top_Dog_Green_5ed388b8-f593-4438-9b5b-3d289a825f81.jpg?v=1722271739",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/TopDog_GREEN_Roomset1.jpg?v=1722271854",
+ "has_room": true,
+ "chapter": "characters",
+ "vendor": "Graduate Collection"
+ },
+ {
+ "title": "The Soire Rose",
+ "handle": "grd-8901-designerwallcoverings-com",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/GRD-8901-DesignerWallcoverings-Los-Angeles-1_5aaf1b13-ea6e-4ce8-9e3f-53cb54939af2.jpg?v=1730485729",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/GRD-8901-DesignerWallcoverings-Los-Angeles-1.jpg?v=1730485679",
+ "has_room": true,
+ "chapter": "characters",
+ "vendor": "Graduate Collection"
+ },
+ {
+ "title": "The Soire Blue",
+ "handle": "grd-8902-designerwallcoverings-com",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/GRD-8902-DesignerWallcoverings-Los-Angeles-1_65b1df4d-b2bb-4708-add6-8236787a35fd.jpg?v=1730489384",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/GRD-8902-DesignerWallcoverings-Los-Angeles-1_65b1df4d-b2bb-4708-add6-8236787a35fd.jpg?v=1730489384",
+ "has_room": false,
+ "chapter": "characters",
+ "vendor": "Graduate Collection"
+ },
+ {
+ "title": "The Soire Peach",
+ "handle": "grd-8903-designerwallcoverings-com",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/GRD-8903-DesignerWallcoverings-Los-Angeles-1_0d792d9d-49e8-451d-87d8-cb988273943b.jpg?v=1730489929",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/GRD-8903-DesignerWallcoverings-Los-Angeles-1_0d792d9d-49e8-451d-87d8-cb988273943b.jpg?v=1730489929",
+ "has_room": false,
+ "chapter": "characters",
+ "vendor": "Graduate Collection"
+ },
+ {
+ "title": "The Soire Plaster",
+ "handle": "grd-8904-designerwallcoverings-com",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/GRD-8904-DesignerWallcoverings-Los-Angeles-1_ce2a9161-c4a3-470c-8a2f-57f8c6ad2951.jpg?v=1730490279",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/GRD-8904-DesignerWallcoverings-Los-Angeles-1_ce2a9161-c4a3-470c-8a2f-57f8c6ad2951.jpg?v=1730490279",
+ "has_room": false,
+ "chapter": "characters",
+ "vendor": "Graduate Collection"
+ },
+ {
+ "title": "The Soire Taupe",
+ "handle": "grd-8905-designerwallcoverings-com",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/GRD-8904-DesignerWallcoverings-Los-Angeles-1_d30a1059-c72c-4b5a-84b3-a863a568b776.jpg?v=1730490513",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/GRD-8904-DesignerWallcoverings-Los-Angeles-1_d30a1059-c72c-4b5a-84b3-a863a568b776.jpg?v=1730490513",
+ "has_room": false,
+ "chapter": "characters",
+ "vendor": "Graduate Collection"
+ },
+ {
+ "title": "The Soire Mustard",
+ "handle": "grd-8906-designerwallcoverings-com",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/GRD-8906-DesignerWallcoverings-Los-Angeles-1_a03ddfea-1e9f-48ca-9c90-4e08b979c0a0.jpg?v=1730490810",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/GRD-8906-DesignerWallcoverings-Los-Angeles-1_a03ddfea-1e9f-48ca-9c90-4e08b979c0a0.jpg?v=1730490810",
+ "has_room": false,
+ "chapter": "characters",
+ "vendor": "Graduate Collection"
+ },
+ {
+ "title": "Stag Grande - Plum",
+ "handle": "stag-wallpaper",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Graduate_Collection_wallpaper_trade_book_Page_17_Image_0002.jpg?v=1570091054",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/stag_plum_offset_grande_7ce7d09c-2260-43df-9408-be0985c14fe0.jpg?v=1570091054",
+ "has_room": true,
+ "chapter": "stags",
+ "vendor": "Graduate Collection UK"
+ },
+ {
+ "title": "Stag Grande Teal",
+ "handle": "stag-grande-wallpaper",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Graduate_Collection_wallpaper_trade_book_Page_17_Image_0006.jpg?v=1570091054",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Stag_Teal_Large_head_grande_e3b54fee-2979-4805-9de2-145b12fe2eed.jpg?v=1570091054",
+ "has_room": true,
+ "chapter": "stags",
+ "vendor": "Graduate Collection UK"
+ },
+ {
+ "title": "Stag Grande Grey",
+ "handle": "stag-grande-wallpaper-1",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Graduate_Collection_wallpaper_trade_book_Page_17_Image_0007.jpg?v=1570091054",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/ABgIgtqVS3OOiOgAFth3_stag_head_grey_grande_28e10eef-c4f6-4ac0-831d-139f08c675f3.jpg?v=1570091054",
+ "has_room": true,
+ "chapter": "stags",
+ "vendor": "Graduate Collection UK"
+ },
+ {
+ "title": "Small Stag Teal",
+ "handle": "small-stag-wallpaper-teal",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/ScreenShot2021-10-08at3.36.54PM.png?v=1633732668",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/Stag_Print_Wallpaper_-_Teal_1024x1024_74130f65-820d-4318-862d-4a3bb0bf93a5.png?v=1730488729",
+ "has_room": true,
+ "chapter": "stags",
+ "vendor": "Graduate Collection UK"
+ },
+ {
+ "title": "Dipped In Moonlight Charcoal",
+ "handle": "copy-of-dipped-in-moonlight-charcoal",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DippedinMoonlightMetalllicGold_Teal_c272519f-6ae8-4897-b33d-f518c24008df.png?v=1730484627",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DippedinMoonlightMetalllicGold_TealRoom_891a94b2-3962-4f18-b19d-102772052fd7.png?v=1730484627",
+ "has_room": true,
+ "chapter": "stags",
+ "vendor": "Graduate Collection UK"
+ },
+ {
+ "title": "Dipped In Moonlight Cream",
+ "handle": "copy-of-dipped-in-moonlight-cream",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DippedinMoonlightMetalllic_Cream_4c873c3d-77ee-4fcf-8900-ad39cdbdfe1c.png?v=1730484621",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DippedinMoonlightMetalllic_CreamRoom_b6207c57-e66f-4645-979e-cb39a415a9fb.png?v=1730484621",
+ "has_room": true,
+ "chapter": "stags",
+ "vendor": "Graduate Collection UK"
+ },
+ {
+ "title": "Dipped In Moonlight Teal",
+ "handle": "copy-of-dipped-in-moonlight-teal",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DippedinMoonlightMetalllic_Teal_fc6a1852-7e7d-472b-a075-06ef92f14c8a.png?v=1730484615",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/DippedinMoonlightMetalllic_TealRoom_cada0f29-52ed-43d3-b40c-4e78c71b3e1e.png?v=1730484615",
+ "has_room": true,
+ "chapter": "stags",
+ "vendor": "Graduate Collection UK"
+ },
+ {
+ "title": "Small Stag Plum",
+ "handle": "small-stag-wallpaper",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Graduate_Collection_wallpaper_trade_book_Page_17_Image_0003.jpg?v=1570091054",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/stag_print_plum_grande_b0ad71c0-d6ed-47fc-8527-c9aecd18856f.jpg?v=1570091054",
+ "has_room": true,
+ "chapter": "stags",
+ "vendor": "Graduate Collection"
+ },
+ {
+ "title": "Small Stag Grey",
+ "handle": "small-stag-wallpaper-2",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/GRD-87043-DesignerWallcoverings-Los-Angeles-2.png?v=1689895357",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Stag_print_grey_grande_4c9922c5-ea6f-408f-b033-ec070caa69ad.jpg?v=1689895357",
+ "has_room": true,
+ "chapter": "stags",
+ "vendor": "Graduate Collection"
+ },
+ {
+ "title": "Stag",
+ "handle": "dwc-1001310",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Stag_1.jpg?v=1602006861",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/products/Stag_1.jpg?v=1602006861",
+ "has_room": false,
+ "chapter": "stags",
+ "vendor": "Graduate Collection"
+ },
+ {
+ "title": "Vestige Pistachio",
+ "handle": "vestige-wallpaper-pistachio",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/ScreenShot2024-03-05at12.30.53PM.png?v=1709670718",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/ScreenShot2024-03-05at12.31.12PM.png?v=1709670701",
+ "has_room": true,
+ "chapter": "stags",
+ "vendor": "Graduate Collection"
+ },
+ {
+ "title": "Vestige Mustard",
+ "handle": "vestige-wallpaper-mustard",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/ScreenShot2024-03-05at12.38.25PM.png?v=1776370140",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/ScreenShot2024-03-05at12.38.06PM.png?v=1776370140",
+ "has_room": true,
+ "chapter": "stags",
+ "vendor": "Graduate Collection"
+ },
+ {
+ "title": "Vestige Grey",
+ "handle": "vestige-wallpaper-grey",
+ "image": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/ScreenShot2024-03-05at12.41.06PM.png?v=1709671354",
+ "room": "https://cdn.shopify.com/s/files/1/0015/4117/7456/files/ScreenShot2024-03-05at12.41.19PM.png?v=1709671326",
+ "has_room": true,
+ "chapter": "stags",
+ "vendor": "Graduate Collection"
+ }
+]
\ No newline at end of file
diff --git a/flipbooks/graduate-collection/index.html b/flipbooks/graduate-collection/index.html
index e967028..f915469 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="48.2">
+ <div id="main-composition" data-composition-id="flipbook" data-width="1920" data-height="1080" data-start="0" data-duration="85.8">
<div class="card" id="cover">
<div class="kicker">Designer Wallcoverings presents</div>
@@ -88,85 +88,255 @@
<div class="rtint"></div>
<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="Visitorian - Taupe room" />
+ <div class="room fallback" id="room5">
+ <img class="rimg" src="assets/room/r5.jpg" alt="Leopard Brown room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Leopard 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="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="room6">
- <img class="rimg" src="assets/room/r6.jpg" alt="Visitorian Navy room" />
+ <div class="room fallback" id="room7">
+ <img class="rimg" src="assets/room/r7.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="room7">
- <img class="rimg" src="assets/room/r7.jpg" alt="Visitorian Mauve room" />
+ <div class="room fallback" id="room8">
+ <img class="rimg" src="assets/room/r8.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="room8">
- <img class="rimg" src="assets/room/r8.jpg" alt="Visitorian Blue room" />
+ <div class="room" id="room9">
+ <img class="rimg" src="assets/room/r9.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="room9">
- <img class="rimg" src="assets/room/r9.jpg" alt="Jolly Boy Dog & Friends room" />
+ <div class="room" id="room10">
+ <img class="rimg" src="assets/room/r10.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="room10">
- <img class="rimg" src="assets/room/r10.jpg" alt="Steampunk Notice Board room" />
+ <div class="room" id="room11">
+ <img class="rimg" src="assets/room/r11.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="room11">
- <img class="rimg" src="assets/room/r11.jpg" alt="Portarait Gallery Taupe room" />
+ <div class="room fallback" id="room12">
+ <img class="rimg" src="assets/room/r12.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="room12">
- <img class="rimg" src="assets/room/r12.jpg" alt="Dachshund Dog room" />
+ <div class="room" id="room13">
+ <img class="rimg" src="assets/room/r13.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="room13">
- <img class="rimg" src="assets/room/r13.jpg" alt="Colonel Fox at the Gentleman's Club - Mustard room" />
+ <div class="room" id="room14">
+ <img class="rimg" src="assets/room/r14.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="room14">
- <img class="rimg" src="assets/room/r14.jpg" alt="Stag Grande - Plum room" />
+ <div class="room" id="room15">
+ <img class="rimg" src="assets/room/r15.jpg" alt="Fashionista Tinted room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Fashionista Tinted</div><div class="rcol">Graduate Collection · characters</div></div>
+ </div>
+ <div class="room" id="room16">
+ <img class="rimg" src="assets/room/r16.jpg" alt="Fashionista Black & White room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Fashionista Black & White</div><div class="rcol">Graduate Collection · characters</div></div>
+ </div>
+ <div class="room" id="room17">
+ <img class="rimg" src="assets/room/r17.jpg" alt="Rabbit Rabbit Rabbit room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Rabbit Rabbit Rabbit</div><div class="rcol">Graduate Collection · characters</div></div>
+ </div>
+ <div class="room" id="room18">
+ <img class="rimg" src="assets/room/r18.jpg" alt="Showgirls Metallic Gold & Black room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Showgirls Metallic Gold & Black</div><div class="rcol">Graduate Collection · characters</div></div>
+ </div>
+ <div class="room" id="room19">
+ <img class="rimg" src="assets/room/r19.jpg" alt="Showgirls Metallic Mustard & Cream room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Showgirls Metallic Mustard & Cream</div><div class="rcol">Graduate Collection · characters</div></div>
+ </div>
+ <div class="room" id="room20">
+ <img class="rimg" src="assets/room/r20.jpg" alt="Showgirls Metallic Pink & Black room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Showgirls Metallic Pink & Black</div><div class="rcol">Graduate Collection · characters</div></div>
+ </div>
+ <div class="room fallback" id="room21">
+ <img class="rimg" src="assets/room/r21.jpg" alt="Portrait Gallery Navy room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Portrait Gallery Navy</div><div class="rcol">Graduate Collection · characters</div></div>
+ </div>
+ <div class="room" id="room22">
+ <img class="rimg" src="assets/room/r22.jpg" alt="Showgirls Metallic Bronze & Cream room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Showgirls Metallic Bronze & Cream</div><div class="rcol">Graduate Collection · characters</div></div>
+ </div>
+ <div class="room" id="room23">
+ <img class="rimg" src="assets/room/r23.jpg" alt="Showgirls Metallic Pink & Cream room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Showgirls Metallic Pink & Cream</div><div class="rcol">Graduate Collection · characters</div></div>
+ </div>
+ <div class="room" id="room24">
+ <img class="rimg" src="assets/room/r24.jpg" alt="Showgirls Metallic Teal & Black room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Showgirls Metallic Teal & Black</div><div class="rcol">Graduate Collection · characters</div></div>
+ </div>
+ <div class="room" id="room25">
+ <img class="rimg" src="assets/room/r25.jpg" alt="Showgirls Metallic Teal & Cream room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Showgirls Metallic Teal & Cream</div><div class="rcol">Graduate Collection · characters</div></div>
+ </div>
+ <div class="room" id="room26">
+ <img class="rimg" src="assets/room/r26.jpg" alt="Showgirls Metallic Bronze & Black room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Showgirls Metallic Bronze & Black</div><div class="rcol">Graduate Collection · characters</div></div>
+ </div>
+ <div class="room" id="room27">
+ <img class="rimg" src="assets/room/r27.jpg" alt="Cavalcade Of Cats Blue room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Cavalcade Of Cats Blue</div><div class="rcol">Graduate Collection · characters</div></div>
+ </div>
+ <div class="room" id="room28">
+ <img class="rimg" src="assets/room/r28.jpg" alt="Cavalcade Of Cats Mustard room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Cavalcade Of Cats Mustard</div><div class="rcol">Graduate Collection · characters</div></div>
+ </div>
+ <div class="room" id="room29">
+ <img class="rimg" src="assets/room/r29.jpg" alt="Cavalcade Of Cats Red room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Cavalcade Of Cats Red</div><div class="rcol">Graduate Collection · characters</div></div>
+ </div>
+ <div class="room" id="room30">
+ <img class="rimg" src="assets/room/r30.jpg" alt="Top Dog Cream room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Top Dog Cream</div><div class="rcol">Graduate Collection · characters</div></div>
+ </div>
+ <div class="room" id="room31">
+ <img class="rimg" src="assets/room/r31.jpg" alt="Top Dog Grey room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Top Dog Grey</div><div class="rcol">Graduate Collection · characters</div></div>
+ </div>
+ <div class="room" id="room32">
+ <img class="rimg" src="assets/room/r32.jpg" alt="At The Art Gallery Burgundy room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">At The Art Gallery Burgundy</div><div class="rcol">Graduate Collection · characters</div></div>
+ </div>
+ <div class="room" id="room33">
+ <img class="rimg" src="assets/room/r33.jpg" alt="At The Art Gallery Charcoal room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">At The Art Gallery Charcoal</div><div class="rcol">Graduate Collection · characters</div></div>
+ </div>
+ <div class="room" id="room34">
+ <img class="rimg" src="assets/room/r34.jpg" alt="At The Art Gallery Teal room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">At The Art Gallery Teal</div><div class="rcol">Graduate Collection · characters</div></div>
+ </div>
+ <div class="room" id="room35">
+ <img class="rimg" src="assets/room/r35.jpg" alt="Top Dog room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Top Dog</div><div class="rcol">Graduate Collection · characters</div></div>
+ </div>
+ <div class="room" id="room36">
+ <img class="rimg" src="assets/room/r36.jpg" alt="The Soire Rose room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">The Soire Rose</div><div class="rcol">Graduate Collection · characters</div></div>
+ </div>
+ <div class="room fallback" id="room37">
+ <img class="rimg" src="assets/room/r37.jpg" alt="The Soire Blue room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">The Soire Blue</div><div class="rcol">Graduate Collection · characters</div></div>
+ </div>
+ <div class="room fallback" id="room38">
+ <img class="rimg" src="assets/room/r38.jpg" alt="The Soire Peach room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">The Soire Peach</div><div class="rcol">Graduate Collection · characters</div></div>
+ </div>
+ <div class="room fallback" id="room39">
+ <img class="rimg" src="assets/room/r39.jpg" alt="The Soire Plaster room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">The Soire Plaster</div><div class="rcol">Graduate Collection · characters</div></div>
+ </div>
+ <div class="room fallback" id="room40">
+ <img class="rimg" src="assets/room/r40.jpg" alt="The Soire Taupe room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">The Soire Taupe</div><div class="rcol">Graduate Collection · characters</div></div>
+ </div>
+ <div class="room fallback" id="room41">
+ <img class="rimg" src="assets/room/r41.jpg" alt="The Soire Mustard room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">The Soire Mustard</div><div class="rcol">Graduate Collection · characters</div></div>
+ </div>
+ <div class="room" id="room42">
+ <img class="rimg" src="assets/room/r42.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="room15">
- <img class="rimg" src="assets/room/r15.jpg" alt="Stag Grande Teal room" />
+ <div class="room" id="room43">
+ <img class="rimg" src="assets/room/r43.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="room16">
- <img class="rimg" src="assets/room/r16.jpg" alt="Stag Grande Grey room" />
+ <div class="room" id="room44">
+ <img class="rimg" src="assets/room/r44.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="room17">
- <img class="rimg" src="assets/room/r17.jpg" alt="Small Stag Teal room" />
+ <div class="room" id="room45">
+ <img class="rimg" src="assets/room/r45.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="room18">
- <img class="rimg" src="assets/room/r18.jpg" alt="Dipped In Moonlight Charcoal room" />
+ <div class="room" id="room46">
+ <img class="rimg" src="assets/room/r46.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="room19">
- <img class="rimg" src="assets/room/r19.jpg" alt="Dipped In Moonlight Cream room" />
+ <div class="room" id="room47">
+ <img class="rimg" src="assets/room/r47.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="room20">
- <img class="rimg" src="assets/room/r20.jpg" alt="Dipped In Moonlight Teal room" />
+ <div class="room" id="room48">
+ <img class="rimg" src="assets/room/r48.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>
+ <div class="room" id="room49">
+ <img class="rimg" src="assets/room/r49.jpg" alt="Small Stag Plum room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Small Stag Plum</div><div class="rcol">Graduate Collection · stags</div></div>
+ </div>
+ <div class="room" id="room50">
+ <img class="rimg" src="assets/room/r50.jpg" alt="Small Stag Grey room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Small Stag Grey</div><div class="rcol">Graduate Collection · stags</div></div>
+ </div>
+ <div class="room fallback" id="room51">
+ <img class="rimg" src="assets/room/r51.jpg" alt="Stag room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Stag</div><div class="rcol">Graduate Collection · stags</div></div>
+ </div>
+ <div class="room" id="room52">
+ <img class="rimg" src="assets/room/r52.jpg" alt="Vestige Pistachio room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Vestige Pistachio</div><div class="rcol">Graduate Collection · stags</div></div>
+ </div>
+ <div class="room" id="room53">
+ <img class="rimg" src="assets/room/r53.jpg" alt="Vestige Mustard room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Vestige Mustard</div><div class="rcol">Graduate Collection · stags</div></div>
+ </div>
+ <div class="room" id="room54">
+ <img class="rimg" src="assets/room/r54.jpg" alt="Vestige Grey room" />
+ <div class="rtint"></div>
+ <div class="rcap"><div class="rpat">Vestige Grey</div><div class="rcol">Graduate Collection · stags</div></div>
</div>
</div>
</div>
@@ -192,67 +362,203 @@
<div class="face back"></div>
</div>
<div class="leaf" id="leaf5">
- <div class="face front"><img class="art" src="assets/img/p5.jpg" alt="Visitorian - Taupe" /><div class="shade"></div></div>
+ <div class="face front"><img class="art" src="assets/img/p5.jpg" alt="Leopard Brown" /><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="Visitorian Navy" /><div class="shade"></div></div>
+ <div class="face front"><img class="art" src="assets/img/p6.jpg" alt="Visitorian - Taupe" /><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 Mauve" /><div class="shade"></div></div>
+ <div class="face front"><img class="art" src="assets/img/p7.jpg" alt="Visitorian Navy" /><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 Blue" /><div class="shade"></div></div>
+ <div class="face front"><img class="art" src="assets/img/p8.jpg" alt="Visitorian Mauve" /><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="Jolly Boy Dog & Friends" /><div class="shade"></div></div>
+ <div class="face front"><img class="art" src="assets/img/p9.jpg" alt="Visitorian Blue" /><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="Steampunk Notice Board" /><div class="shade"></div></div>
+ <div class="face front"><img class="art" src="assets/img/p10.jpg" alt="Jolly Boy Dog & Friends" /><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="Portarait Gallery Taupe" /><div class="shade"></div></div>
+ <div class="face front"><img class="art" src="assets/img/p11.jpg" alt="Steampunk Notice Board" /><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="Dachshund Dog" /><div class="shade"></div></div>
+ <div class="face front"><img class="art" src="assets/img/p12.jpg" alt="Portarait Gallery Taupe" /><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="Colonel Fox at the Gentleman's Club - Mustard" /><div class="shade"></div></div>
+ <div class="face front"><img class="art" src="assets/img/p13.jpg" alt="Dachshund Dog" /><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="Stag Grande - Plum" /><div class="shade"></div></div>
+ <div class="face front"><img class="art" src="assets/img/p14.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="leaf15">
- <div class="face front"><img class="art" src="assets/img/p15.jpg" alt="Stag Grande Teal" /><div class="shade"></div></div>
+ <div class="face front"><img class="art" src="assets/img/p15.jpg" alt="Fashionista Tinted" /><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 Grey" /><div class="shade"></div></div>
+ <div class="face front"><img class="art" src="assets/img/p16.jpg" alt="Fashionista Black & White" /><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="Small Stag Teal" /><div class="shade"></div></div>
+ <div class="face front"><img class="art" src="assets/img/p17.jpg" alt="Rabbit Rabbit Rabbit" /><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="Dipped In Moonlight Charcoal" /><div class="shade"></div></div>
+ <div class="face front"><img class="art" src="assets/img/p18.jpg" alt="Showgirls Metallic Gold & Black" /><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="Dipped In Moonlight Cream" /><div class="shade"></div></div>
+ <div class="face front"><img class="art" src="assets/img/p19.jpg" alt="Showgirls Metallic Mustard & 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 Teal" /><div class="shade"></div></div>
+ <div class="face front"><img class="art" src="assets/img/p20.jpg" alt="Showgirls Metallic Pink & Black" /><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="Portrait Gallery Navy" /><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="Showgirls Metallic Bronze & Cream" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf23">
+ <div class="face front"><img class="art" src="assets/img/p23.jpg" alt="Showgirls Metallic Pink & Cream" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf24">
+ <div class="face front"><img class="art" src="assets/img/p24.jpg" alt="Showgirls Metallic Teal & Black" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf25">
+ <div class="face front"><img class="art" src="assets/img/p25.jpg" alt="Showgirls Metallic Teal & Cream" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf26">
+ <div class="face front"><img class="art" src="assets/img/p26.jpg" alt="Showgirls Metallic Bronze & Black" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf27">
+ <div class="face front"><img class="art" src="assets/img/p27.jpg" alt="Cavalcade Of Cats Blue" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf28">
+ <div class="face front"><img class="art" src="assets/img/p28.jpg" alt="Cavalcade Of Cats Mustard" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf29">
+ <div class="face front"><img class="art" src="assets/img/p29.jpg" alt="Cavalcade Of Cats Red" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf30">
+ <div class="face front"><img class="art" src="assets/img/p30.jpg" alt="Top Dog Cream" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf31">
+ <div class="face front"><img class="art" src="assets/img/p31.jpg" alt="Top Dog Grey" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf32">
+ <div class="face front"><img class="art" src="assets/img/p32.jpg" alt="At The Art Gallery Burgundy" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf33">
+ <div class="face front"><img class="art" src="assets/img/p33.jpg" alt="At The Art Gallery Charcoal" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf34">
+ <div class="face front"><img class="art" src="assets/img/p34.jpg" alt="At The Art Gallery Teal" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf35">
+ <div class="face front"><img class="art" src="assets/img/p35.jpg" alt="Top Dog" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf36">
+ <div class="face front"><img class="art" src="assets/img/p36.jpg" alt="The Soire Rose" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf37">
+ <div class="face front"><img class="art" src="assets/img/p37.jpg" alt="The Soire Blue" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf38">
+ <div class="face front"><img class="art" src="assets/img/p38.jpg" alt="The Soire Peach" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf39">
+ <div class="face front"><img class="art" src="assets/img/p39.jpg" alt="The Soire Plaster" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf40">
+ <div class="face front"><img class="art" src="assets/img/p40.jpg" alt="The Soire Taupe" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf41">
+ <div class="face front"><img class="art" src="assets/img/p41.jpg" alt="The Soire Mustard" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf42">
+ <div class="face front"><img class="art" src="assets/img/p42.jpg" alt="Stag Grande - Plum" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf43">
+ <div class="face front"><img class="art" src="assets/img/p43.jpg" alt="Stag Grande Teal" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf44">
+ <div class="face front"><img class="art" src="assets/img/p44.jpg" alt="Stag Grande Grey" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf45">
+ <div class="face front"><img class="art" src="assets/img/p45.jpg" alt="Small Stag Teal" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf46">
+ <div class="face front"><img class="art" src="assets/img/p46.jpg" alt="Dipped In Moonlight Charcoal" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf47">
+ <div class="face front"><img class="art" src="assets/img/p47.jpg" alt="Dipped In Moonlight Cream" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf48">
+ <div class="face front"><img class="art" src="assets/img/p48.jpg" alt="Dipped In Moonlight Teal" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf49">
+ <div class="face front"><img class="art" src="assets/img/p49.jpg" alt="Small Stag Plum" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf50">
+ <div class="face front"><img class="art" src="assets/img/p50.jpg" alt="Small Stag Grey" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf51">
+ <div class="face front"><img class="art" src="assets/img/p51.jpg" alt="Stag" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf52">
+ <div class="face front"><img class="art" src="assets/img/p52.jpg" alt="Vestige Pistachio" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf53">
+ <div class="face front"><img class="art" src="assets/img/p53.jpg" alt="Vestige Mustard" /><div class="shade"></div></div>
+ <div class="face back"></div>
+ </div>
+ <div class="leaf" id="leaf54">
+ <div class="face front"><img class="art" src="assets/img/p54.jpg" alt="Vestige Grey" /><div class="shade"></div></div>
<div class="face back"></div>
</div>
</div>
@@ -263,39 +569,73 @@
<div class="url">designerwallcoverings.com</div>
</div>
- <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="bgm" src="assets/audio/jazz.wav" data-start="0" data-duration="85.8" 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>
+ <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>
<script>
window.__timelines = window.__timelines || {};
const tl = gsap.timeline({ paused: true });
- 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("#leaf0", { rotateY:0, zIndex:55 });
+ gsap.set("#leaf1", { rotateY:0, zIndex:54 });
+ gsap.set("#leaf2", { rotateY:0, zIndex:53 });
+ gsap.set("#leaf3", { rotateY:0, zIndex:52 });
+ gsap.set("#leaf4", { rotateY:0, zIndex:51 });
+ gsap.set("#leaf5", { rotateY:0, zIndex:50 });
+ gsap.set("#leaf6", { rotateY:0, zIndex:49 });
+ gsap.set("#leaf7", { rotateY:0, zIndex:48 });
+ gsap.set("#leaf8", { rotateY:0, zIndex:47 });
+ gsap.set("#leaf9", { rotateY:0, zIndex:46 });
+ gsap.set("#leaf10", { rotateY:0, zIndex:45 });
+ gsap.set("#leaf11", { rotateY:0, zIndex:44 });
+ gsap.set("#leaf12", { rotateY:0, zIndex:43 });
+ gsap.set("#leaf13", { rotateY:0, zIndex:42 });
+ gsap.set("#leaf14", { rotateY:0, zIndex:41 });
+ gsap.set("#leaf15", { rotateY:0, zIndex:40 });
+ gsap.set("#leaf16", { rotateY:0, zIndex:39 });
+ gsap.set("#leaf17", { rotateY:0, zIndex:38 });
+ gsap.set("#leaf18", { rotateY:0, zIndex:37 });
+ gsap.set("#leaf19", { rotateY:0, zIndex:36 });
+ gsap.set("#leaf20", { rotateY:0, zIndex:35 });
+ gsap.set("#leaf21", { rotateY:0, zIndex:34 });
+ gsap.set("#leaf22", { rotateY:0, zIndex:33 });
+ gsap.set("#leaf23", { rotateY:0, zIndex:32 });
+ gsap.set("#leaf24", { rotateY:0, zIndex:31 });
+ gsap.set("#leaf25", { rotateY:0, zIndex:30 });
+ gsap.set("#leaf26", { rotateY:0, zIndex:29 });
+ gsap.set("#leaf27", { rotateY:0, zIndex:28 });
+ gsap.set("#leaf28", { rotateY:0, zIndex:27 });
+ gsap.set("#leaf29", { rotateY:0, zIndex:26 });
+ gsap.set("#leaf30", { rotateY:0, zIndex:25 });
+ gsap.set("#leaf31", { rotateY:0, zIndex:24 });
+ gsap.set("#leaf32", { rotateY:0, zIndex:23 });
+ gsap.set("#leaf33", { rotateY:0, zIndex:22 });
+ gsap.set("#leaf34", { rotateY:0, zIndex:21 });
+ gsap.set("#leaf35", { rotateY:0, zIndex:20 });
+ gsap.set("#leaf36", { rotateY:0, zIndex:19 });
+ gsap.set("#leaf37", { rotateY:0, zIndex:18 });
+ gsap.set("#leaf38", { rotateY:0, zIndex:17 });
+ gsap.set("#leaf39", { rotateY:0, zIndex:16 });
+ gsap.set("#leaf40", { rotateY:0, zIndex:15 });
+ gsap.set("#leaf41", { rotateY:0, zIndex:14 });
+ gsap.set("#leaf42", { rotateY:0, zIndex:13 });
+ gsap.set("#leaf43", { rotateY:0, zIndex:12 });
+ gsap.set("#leaf44", { rotateY:0, zIndex:11 });
+ gsap.set("#leaf45", { rotateY:0, zIndex:10 });
+ gsap.set("#leaf46", { rotateY:0, zIndex:9 });
+ gsap.set("#leaf47", { rotateY:0, zIndex:8 });
+ gsap.set("#leaf48", { rotateY:0, zIndex:7 });
+ gsap.set("#leaf49", { rotateY:0, zIndex:6 });
+ gsap.set("#leaf50", { rotateY:0, zIndex:5 });
+ gsap.set("#leaf51", { rotateY:0, zIndex:4 });
+ gsap.set("#leaf52", { rotateY:0, zIndex:3 });
+ gsap.set("#leaf53", { rotateY:0, zIndex:2 });
+ gsap.set("#leaf54", { rotateY:0, zIndex:1 });
gsap.set("#room0", { opacity:1 });
gsap.set("#room1", { opacity:0 });
gsap.set("#room2", { opacity:0 });
@@ -317,6 +657,40 @@
gsap.set("#room18", { opacity:0 });
gsap.set("#room19", { opacity:0 });
gsap.set("#room20", { opacity:0 });
+ gsap.set("#room21", { opacity:0 });
+ gsap.set("#room22", { opacity:0 });
+ gsap.set("#room23", { opacity:0 });
+ gsap.set("#room24", { opacity:0 });
+ gsap.set("#room25", { opacity:0 });
+ gsap.set("#room26", { opacity:0 });
+ gsap.set("#room27", { opacity:0 });
+ gsap.set("#room28", { opacity:0 });
+ gsap.set("#room29", { opacity:0 });
+ gsap.set("#room30", { opacity:0 });
+ gsap.set("#room31", { opacity:0 });
+ gsap.set("#room32", { opacity:0 });
+ gsap.set("#room33", { opacity:0 });
+ gsap.set("#room34", { opacity:0 });
+ gsap.set("#room35", { opacity:0 });
+ gsap.set("#room36", { opacity:0 });
+ gsap.set("#room37", { opacity:0 });
+ gsap.set("#room38", { opacity:0 });
+ gsap.set("#room39", { opacity:0 });
+ gsap.set("#room40", { opacity:0 });
+ gsap.set("#room41", { opacity:0 });
+ gsap.set("#room42", { opacity:0 });
+ gsap.set("#room43", { opacity:0 });
+ gsap.set("#room44", { opacity:0 });
+ gsap.set("#room45", { opacity:0 });
+ gsap.set("#room46", { opacity:0 });
+ gsap.set("#room47", { opacity:0 });
+ gsap.set("#room48", { opacity:0 });
+ gsap.set("#room49", { opacity:0 });
+ gsap.set("#room50", { opacity:0 });
+ gsap.set("#room51", { opacity:0 });
+ gsap.set("#room52", { opacity:0 });
+ gsap.set("#room53", { opacity:0 });
+ gsap.set("#room54", { 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 });
@@ -330,169 +704,407 @@
// page turns + room crossfades
- 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);
+ 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);
// outro
- 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);
+ 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);
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 }, 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);
+ 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);
window.__timelines["flipbook"] = tl;
</script>
diff --git a/public/collections/graduate-collection.html b/public/collections/graduate-collection.html
index 184c5f9..1cd4a1f 100644
--- a/public/collections/graduate-collection.html
+++ b/public/collections/graduate-collection.html
@@ -63,7 +63,7 @@
<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 21 patterns, narrated in Steve Abrams' voice.</div>
+ <div class="note">🔊 <b>Sound on</b> — leaf through all 55 patterns, narrated in Steve Abrams' voice.</div>
</div>
</div>
← 1b2b7e2 Graduate flipbook: remove cheetah (21 patterns) + half-speed
·
back to Dw Marketing Reels
·
record: pre-edit backup of live theme dw-collection-hero.liq c1e6f34 →