From 513fb6f05999f18b5dd5f17981858f9670e2fc39 Mon Sep 17 00:00:00 2001 From: saiminh Date: Wed, 23 Aug 2023 19:03:17 +0200 Subject: [PATCH] tuning the illusion --- .../functions-internal/sveltekit-render.mjs | 2 +- .netlify/server/chunks/internal.js | 2 +- .../entries/pages/work/_page.server.ts.js | 1 - .../server/entries/pages/work/_page.svelte.js | 6 ++- .../pages/work/_slug_/_page.server.ts.js | 2 - .../entries/pages/work/_slug_/_page.svelte.js | 11 +++--- .netlify/server/manifest-full.js | 2 +- .netlify/server/manifest.js | 2 +- .netlify/server/nodes/1.js | 2 +- .netlify/server/nodes/2.js | 2 +- .netlify/server/nodes/6.js | 2 +- .netlify/server/nodes/7.js | 4 +- src/routes/work/[slug]/+page.svelte | 39 ++++++++++--------- 13 files changed, 39 insertions(+), 38 deletions(-) diff --git a/.netlify/functions-internal/sveltekit-render.mjs b/.netlify/functions-internal/sveltekit-render.mjs index 5a9d48b..7b1611e 100644 --- a/.netlify/functions-internal/sveltekit-render.mjs +++ b/.netlify/functions-internal/sveltekit-render.mjs @@ -12,7 +12,7 @@ return { assets: new Set([".DS_Store","cursor.png","cursor.svg","favicon.png","pointer.png","pointer.svg","work/.DS_Store","work/adidas/adidas_hero.jpg","work/formo/formo-rec.mp4","work/formo/formo-rec.webm","work/formo/formo_hero.png","work/jpl/jpl_hero.jpg"]), mimeTypes: {".png":"image/png",".svg":"image/svg+xml",".jpg":"image/jpeg",".mp4":"video/mp4",".webm":"video/webm"}, _: { - client: {"start":"_app/immutable/entry/start.e3c93b33.js","app":"_app/immutable/entry/app.590275c4.js","imports":["_app/immutable/entry/start.e3c93b33.js","_app/immutable/chunks/scheduler.cd8ec38c.js","_app/immutable/chunks/singletons.6f10bc10.js","_app/immutable/entry/app.590275c4.js","_app/immutable/chunks/scheduler.cd8ec38c.js","_app/immutable/chunks/index.9e7d825d.js"],"stylesheets":[],"fonts":[]}, + client: {"start":"_app/immutable/entry/start.83bc8b41.js","app":"_app/immutable/entry/app.751e6d7c.js","imports":["_app/immutable/entry/start.83bc8b41.js","_app/immutable/chunks/scheduler.cd8ec38c.js","_app/immutable/chunks/singletons.3c20dddb.js","_app/immutable/entry/app.751e6d7c.js","_app/immutable/chunks/scheduler.cd8ec38c.js","_app/immutable/chunks/index.9e7d825d.js"],"stylesheets":[],"fonts":[]}, nodes: [ __memo(() => import('../server/nodes/0.js')), __memo(() => import('../server/nodes/1.js')), diff --git a/.netlify/server/chunks/internal.js b/.netlify/server/chunks/internal.js index ca3647e..214b49b 100644 --- a/.netlify/server/chunks/internal.js +++ b/.netlify/server/chunks/internal.js @@ -166,7 +166,7 @@ const options = {
` + status + '\n
\n

' + message + "

\n
\n
\n \n\n" }, - version_hash: "4jgq38" + version_hash: "9p1c8j" }; function get_hooks() { return {}; diff --git a/.netlify/server/entries/pages/work/_page.server.ts.js b/.netlify/server/entries/pages/work/_page.server.ts.js index e858b3c..5c835b6 100644 --- a/.netlify/server/entries/pages/work/_page.server.ts.js +++ b/.netlify/server/entries/pages/work/_page.server.ts.js @@ -22,7 +22,6 @@ async function load() { console.error("No posts found"); return { posts - // images }; } export { diff --git a/.netlify/server/entries/pages/work/_page.svelte.js b/.netlify/server/entries/pages/work/_page.svelte.js index 43dd5de..aaea8bd 100644 --- a/.netlify/server/entries/pages/work/_page.svelte.js +++ b/.netlify/server/entries/pages/work/_page.svelte.js @@ -44,7 +44,7 @@ const Page = create_ssr_component(($$result, $$props, $$bindings, slots) => { $$bindings.data(data); $$result.css.add(css); return `

Casestudies

${each(data.posts, (work, i) => { - return `${validate_component(CldImage, "CldImage").$$render( + return `${validate_component(CldImage, "CldImage").$$render( $$result, { src: work.meta.header_bg_image, @@ -52,7 +52,9 @@ const Page = create_ssr_component(($$result, $$props, $$bindings, slots) => { alt: work.meta.title, width: "2100", height: "1400", - loading: i < 9 ? "eager" : "lazy" + objectFit: "fill", + placeholder: "blur", + loading: i < 10 ? "eager" : "lazy" }, {}, {} diff --git a/.netlify/server/entries/pages/work/_slug_/_page.server.ts.js b/.netlify/server/entries/pages/work/_slug_/_page.server.ts.js index 03d5b48..f80d46d 100644 --- a/.netlify/server/entries/pages/work/_slug_/_page.server.ts.js +++ b/.netlify/server/entries/pages/work/_slug_/_page.server.ts.js @@ -19,8 +19,6 @@ async function load({ params }) { svg, video, Content - // src, - // srcSet }; } catch (error) { console.error(error); diff --git a/.netlify/server/entries/pages/work/_slug_/_page.svelte.js b/.netlify/server/entries/pages/work/_slug_/_page.svelte.js index 60e2a25..4b3a8d1 100644 --- a/.netlify/server/entries/pages/work/_slug_/_page.svelte.js +++ b/.netlify/server/entries/pages/work/_slug_/_page.svelte.js @@ -1,21 +1,19 @@ -import { c as create_ssr_component, o as onDestroy, v as validate_component } from "../../../../chunks/ssr.js"; +import { c as create_ssr_component, v as validate_component } from "../../../../chunks/ssr.js"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/dist/ScrollTrigger.js"; import { C as CldImage } from "../../../../chunks/CldImage.js"; const _page_svelte_svelte_type_style_lang = ""; const css = { - code: "article.svelte-nm1xy1.svelte-nm1xy1{width:100vw;overflow:hidden;padding-bottom:60px}.subnav.svelte-nm1xy1.svelte-nm1xy1{position:fixed;top:0;right:0;z-index:4;padding:var(--spacing-outer)}.heromask.svelte-nm1xy1.svelte-nm1xy1{position:fixed;top:0;left:0;width:100%;z-index:2;height:auto;aspect-ratio:var(--aspect-ratio-heroes);clip-path:polygon(0 0, 100% 0, 100% 100%, 0% 100%)}@media screen and (min-width: 768px){.heromask.svelte-nm1xy1.svelte-nm1xy1{position:fixed}}.heromask img{z-index:0;display:block;position:relative;width:100%;height:100%;aspect-ratio:var(--aspect-ratio-heroes);margin:0;object-fit:fill}.work-content.svelte-nm1xy1.svelte-nm1xy1{padding:0 var(--spacing-outer);padding-top:calc(100vw / var(--aspect-ratio-heroes) + 1.5em);position:relative;z-index:1;margin-top:0;color:var(--color-text)}@media screen and (min-width: 768px){.work-content.svelte-nm1xy1.svelte-nm1xy1{margin-left:40vw;max-width:60vw;padding-top:calc(3 * var(--spacing-outer));padding-left:calc(var(--spacing-outer) * 1.5);padding-right:calc(var(--spacing-outer) * 2.5)}}@media screen and (min-width: 768px){.work-content-text.svelte-nm1xy1.svelte-nm1xy1{border-top:1px solid var(--color-text)}}h1.svelte-nm1xy1.svelte-nm1xy1{position:relative;z-index:1;margin:0}@media screen and (min-width: 768px){h1.svelte-nm1xy1.svelte-nm1xy1{padding:0 0 1em 0}}h1.svelte-nm1xy1 .name.svelte-nm1xy1{display:none}h1.svelte-nm1xy1 .svg-logo.svelte-nm1xy1 svg{width:auto;height:auto;max-width:250px;max-height:80px;margin-bottom:1em}@media screen and (min-width: 768px){h1.svelte-nm1xy1 .svg-logo.svelte-nm1xy1 svg{max-width:400px;max-height:200px}}.header-nav{transition:all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1)}.work .header-nav{transform:translateY(100%)}", + code: ".work.svelte-1vxlfgy.svelte-1vxlfgy{width:100vw;min-height:100svh;overflow:hidden;padding-bottom:60px;background-color:var(--color-bg);position:relative;top:100svh}@media screen and (min-width: 768px){.work.svelte-1vxlfgy.svelte-1vxlfgy{top:0;left:100vw}}.subnav.svelte-1vxlfgy.svelte-1vxlfgy{position:fixed;top:0;right:0;z-index:4;padding:var(--spacing-outer)}.heromask.svelte-1vxlfgy.svelte-1vxlfgy{position:fixed;top:0;left:0;aspect-ratio:var(--aspect-ratio-heroes);width:100%;height:auto;z-index:2;clip-path:polygon(0 0, 100% 0, 100% 100%, 0% 100%)}.heromask img{z-index:0;display:block;position:relative;width:100%;height:100%;aspect-ratio:var(--aspect-ratio-heroes);margin:0;object-fit:fill}.work-content.svelte-1vxlfgy.svelte-1vxlfgy{padding:0 var(--spacing-outer);padding-top:calc(100vw / var(--aspect-ratio-heroes) + 1.5em);position:relative;z-index:1;margin-top:0;color:var(--color-text)}@media screen and (min-width: 768px){.work-content.svelte-1vxlfgy.svelte-1vxlfgy{margin-left:40vw;max-width:60vw;padding-top:calc(3 * var(--spacing-outer));padding-left:calc(var(--spacing-outer) * 1.5);padding-right:calc(var(--spacing-outer) * 2.5)}}@media screen and (min-width: 768px){.work-content-text.svelte-1vxlfgy.svelte-1vxlfgy{border-top:1px solid var(--color-text)}}h1.svelte-1vxlfgy.svelte-1vxlfgy{position:relative;z-index:1;margin:0}@media screen and (min-width: 768px){h1.svelte-1vxlfgy.svelte-1vxlfgy{padding:0 0 1em 0}}h1.svelte-1vxlfgy .name.svelte-1vxlfgy{display:none}h1.svelte-1vxlfgy .svg-logo.svelte-1vxlfgy svg{width:auto;height:auto;max-width:250px;max-height:80px;margin-bottom:1em}@media screen and (min-width: 768px){h1.svelte-1vxlfgy .svg-logo.svelte-1vxlfgy svg{max-width:400px;max-height:200px}}.header-nav{transition:all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1)}.work .header-nav{transform:translateY(100%)}", map: null }; const Page = create_ssr_component(($$result, $$props, $$bindings, slots) => { let { data } = $$props; gsap.registerPlugin(ScrollTrigger); - onDestroy(() => { - }); if ($$props.data === void 0 && $$bindings.data && data !== void 0) $$bindings.data(data); $$result.css.add(css); - return `
${validate_component(CldImage, "CldImage").$$render( + return `
${validate_component(CldImage, "CldImage").$$render( $$result, { src: data.header_bg_image, @@ -23,12 +21,13 @@ const Page = create_ssr_component(($$result, $$props, $$bindings, slots) => { sizes: "100vw", width: 2100, height: 1400, + placeholder: "blur", loading: "eager", objectFit: "fill" }, {}, {} - )}
← Back
${``}
`; + )}
← Back
${``}
`; }); export { Page as default diff --git a/.netlify/server/manifest-full.js b/.netlify/server/manifest-full.js index fd87e8f..b54b13a 100644 --- a/.netlify/server/manifest-full.js +++ b/.netlify/server/manifest-full.js @@ -10,7 +10,7 @@ return { assets: new Set([".DS_Store","cursor.png","cursor.svg","favicon.png","pointer.png","pointer.svg","work/.DS_Store","work/adidas/adidas_hero.jpg","work/formo/formo-rec.mp4","work/formo/formo-rec.webm","work/formo/formo_hero.png","work/jpl/jpl_hero.jpg"]), mimeTypes: {".png":"image/png",".svg":"image/svg+xml",".jpg":"image/jpeg",".mp4":"video/mp4",".webm":"video/webm"}, _: { - client: {"start":"_app/immutable/entry/start.e3c93b33.js","app":"_app/immutable/entry/app.590275c4.js","imports":["_app/immutable/entry/start.e3c93b33.js","_app/immutable/chunks/scheduler.cd8ec38c.js","_app/immutable/chunks/singletons.6f10bc10.js","_app/immutable/entry/app.590275c4.js","_app/immutable/chunks/scheduler.cd8ec38c.js","_app/immutable/chunks/index.9e7d825d.js"],"stylesheets":[],"fonts":[]}, + client: {"start":"_app/immutable/entry/start.83bc8b41.js","app":"_app/immutable/entry/app.751e6d7c.js","imports":["_app/immutable/entry/start.83bc8b41.js","_app/immutable/chunks/scheduler.cd8ec38c.js","_app/immutable/chunks/singletons.3c20dddb.js","_app/immutable/entry/app.751e6d7c.js","_app/immutable/chunks/scheduler.cd8ec38c.js","_app/immutable/chunks/index.9e7d825d.js"],"stylesheets":[],"fonts":[]}, nodes: [ __memo(() => import('./nodes/0.js')), __memo(() => import('./nodes/1.js')), diff --git a/.netlify/server/manifest.js b/.netlify/server/manifest.js index fd87e8f..b54b13a 100644 --- a/.netlify/server/manifest.js +++ b/.netlify/server/manifest.js @@ -10,7 +10,7 @@ return { assets: new Set([".DS_Store","cursor.png","cursor.svg","favicon.png","pointer.png","pointer.svg","work/.DS_Store","work/adidas/adidas_hero.jpg","work/formo/formo-rec.mp4","work/formo/formo-rec.webm","work/formo/formo_hero.png","work/jpl/jpl_hero.jpg"]), mimeTypes: {".png":"image/png",".svg":"image/svg+xml",".jpg":"image/jpeg",".mp4":"video/mp4",".webm":"video/webm"}, _: { - client: {"start":"_app/immutable/entry/start.e3c93b33.js","app":"_app/immutable/entry/app.590275c4.js","imports":["_app/immutable/entry/start.e3c93b33.js","_app/immutable/chunks/scheduler.cd8ec38c.js","_app/immutable/chunks/singletons.6f10bc10.js","_app/immutable/entry/app.590275c4.js","_app/immutable/chunks/scheduler.cd8ec38c.js","_app/immutable/chunks/index.9e7d825d.js"],"stylesheets":[],"fonts":[]}, + client: {"start":"_app/immutable/entry/start.83bc8b41.js","app":"_app/immutable/entry/app.751e6d7c.js","imports":["_app/immutable/entry/start.83bc8b41.js","_app/immutable/chunks/scheduler.cd8ec38c.js","_app/immutable/chunks/singletons.3c20dddb.js","_app/immutable/entry/app.751e6d7c.js","_app/immutable/chunks/scheduler.cd8ec38c.js","_app/immutable/chunks/index.9e7d825d.js"],"stylesheets":[],"fonts":[]}, nodes: [ __memo(() => import('./nodes/0.js')), __memo(() => import('./nodes/1.js')), diff --git a/.netlify/server/nodes/1.js b/.netlify/server/nodes/1.js index 7a3de86..9e81526 100644 --- a/.netlify/server/nodes/1.js +++ b/.netlify/server/nodes/1.js @@ -3,6 +3,6 @@ export const index = 1; let component_cache; export const component = async () => component_cache ??= (await import('../entries/fallbacks/error.svelte.js')).default; -export const imports = ["_app/immutable/nodes/1.8366a90d.js","_app/immutable/chunks/scheduler.cd8ec38c.js","_app/immutable/chunks/index.9e7d825d.js","_app/immutable/chunks/singletons.6f10bc10.js"]; +export const imports = ["_app/immutable/nodes/1.a7aa4246.js","_app/immutable/chunks/scheduler.cd8ec38c.js","_app/immutable/chunks/index.9e7d825d.js","_app/immutable/chunks/singletons.3c20dddb.js"]; export const stylesheets = []; export const fonts = []; diff --git a/.netlify/server/nodes/2.js b/.netlify/server/nodes/2.js index ce0db2a..4a5c2f5 100644 --- a/.netlify/server/nodes/2.js +++ b/.netlify/server/nodes/2.js @@ -3,6 +3,6 @@ export const index = 2; let component_cache; export const component = async () => component_cache ??= (await import('../entries/pages/_page.svelte.js')).default; -export const imports = ["_app/immutable/nodes/2.108d664b.js","_app/immutable/chunks/scheduler.cd8ec38c.js","_app/immutable/chunks/index.9e7d825d.js","_app/immutable/chunks/navigation.31299d66.js","_app/immutable/chunks/ScrollTrigger.96597ec4.js","_app/immutable/chunks/singletons.6f10bc10.js","_app/immutable/chunks/index.4db78ffb.js"]; +export const imports = ["_app/immutable/nodes/2.1f7805c5.js","_app/immutable/chunks/scheduler.cd8ec38c.js","_app/immutable/chunks/index.9e7d825d.js","_app/immutable/chunks/navigation.6a0efe7b.js","_app/immutable/chunks/ScrollTrigger.96597ec4.js","_app/immutable/chunks/singletons.3c20dddb.js","_app/immutable/chunks/index.4db78ffb.js"]; export const stylesheets = ["_app/immutable/assets/2.aabebfd8.css"]; export const fonts = []; diff --git a/.netlify/server/nodes/6.js b/.netlify/server/nodes/6.js index 4bcedd0..6c84c07 100644 --- a/.netlify/server/nodes/6.js +++ b/.netlify/server/nodes/6.js @@ -5,6 +5,6 @@ let component_cache; export const component = async () => component_cache ??= (await import('../entries/pages/work/_page.svelte.js')).default; export { server }; export const server_id = "src/routes/work/+page.server.ts"; -export const imports = ["_app/immutable/nodes/6.92eeee30.js","_app/immutable/chunks/scheduler.cd8ec38c.js","_app/immutable/chunks/index.9e7d825d.js","_app/immutable/chunks/each.e59479a4.js","_app/immutable/chunks/navigation.31299d66.js","_app/immutable/chunks/ScrollTrigger.96597ec4.js","_app/immutable/chunks/singletons.6f10bc10.js","_app/immutable/chunks/index.4db78ffb.js","_app/immutable/chunks/CldImage.ebf46432.js"]; +export const imports = ["_app/immutable/nodes/6.738d7458.js","_app/immutable/chunks/scheduler.cd8ec38c.js","_app/immutable/chunks/index.9e7d825d.js","_app/immutable/chunks/each.e59479a4.js","_app/immutable/chunks/navigation.6a0efe7b.js","_app/immutable/chunks/ScrollTrigger.96597ec4.js","_app/immutable/chunks/singletons.3c20dddb.js","_app/immutable/chunks/index.4db78ffb.js","_app/immutable/chunks/CldImage.ebf46432.js"]; export const stylesheets = ["_app/immutable/assets/6.21634584.css"]; export const fonts = []; diff --git a/.netlify/server/nodes/7.js b/.netlify/server/nodes/7.js index 315b4cf..e1e491f 100644 --- a/.netlify/server/nodes/7.js +++ b/.netlify/server/nodes/7.js @@ -5,6 +5,6 @@ let component_cache; export const component = async () => component_cache ??= (await import('../entries/pages/work/_slug_/_page.svelte.js')).default; export { server }; export const server_id = "src/routes/work/[slug]/+page.server.ts"; -export const imports = ["_app/immutable/nodes/7.ab267fa5.js","_app/immutable/chunks/scheduler.cd8ec38c.js","_app/immutable/chunks/index.9e7d825d.js","_app/immutable/chunks/index.4db78ffb.js","_app/immutable/chunks/ScrollTrigger.96597ec4.js","_app/immutable/chunks/CldImage.ebf46432.js"]; -export const stylesheets = ["_app/immutable/assets/7.35c55333.css"]; +export const imports = ["_app/immutable/nodes/7.07bb8339.js","_app/immutable/chunks/scheduler.cd8ec38c.js","_app/immutable/chunks/index.9e7d825d.js","_app/immutable/chunks/index.4db78ffb.js","_app/immutable/chunks/ScrollTrigger.96597ec4.js","_app/immutable/chunks/CldImage.ebf46432.js"]; +export const stylesheets = ["_app/immutable/assets/7.e811ef30.css"]; export const fonts = []; diff --git a/src/routes/work/[slug]/+page.svelte b/src/routes/work/[slug]/+page.svelte index 51ef91c..b67ed0c 100644 --- a/src/routes/work/[slug]/+page.svelte +++ b/src/routes/work/[slug]/+page.svelte @@ -10,18 +10,21 @@ let visible = false; function animForDesktop() { + ScrollTrigger.getAll().forEach(t => t.kill()); - gsap.to('.heromask img', { duration: .6, x: "-10%", ease: "cubic.inOut" }) - gsap.from('.work', { - xPercent: 100, + + // gsap.to('.heromask img', { duration: .6, x: "-10%", ease: "cubic.inOut" }) + + gsap.to('.work', { + xPercent: -100, duration: .66, ease: "cubic.out", + delay: .2 }) let heroheight = document.querySelector('.heromask')?.getBoundingClientRect().height || 100; - gsap.fromTo('.heromask', { - clipPath: "polygon(0 0, 100% 0, 100% 100%, 0% 100%)", - },{ + + gsap.to('.heromask', { clipPath: "polygon(0 0, 50% 0, 25% 100%, 0% 100%)", duration: .6, ease: "cubic.inOut", @@ -47,11 +50,12 @@ function animForMobile() { ScrollTrigger.getAll().forEach(t => t.kill()); gsap.to('.heromask img', { duration: .6, x: 0, ease: "cubic.inOut" }) - gsap.from('.work', { + gsap.to('.work', { opacity: 0, y: 100, duration: .66, ease: "cubic.inOut", + delay: .2 }) gsap.to('.heromask', { @@ -105,16 +109,9 @@ portrait.addEventListener("change", function(e) { animForSize(); }) - - // document.body.classList.add('work'); - }) - onDestroy(() => { - // document.body.classList.remove('work'); }) - -