simon/floter.design
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

tuning the illusion

Browse source
This commit is contained in:
saiminh 2023-08-23 19:03:17 +02:00
parent de7172f686
commit 513fb6f059
13 changed files with 39 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.netlify/functions-internal/sveltekit-render.mjs
View file

@ -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')),

2
.netlify/server/chunks/internal.js
View file

@ -166,7 +166,7 @@ const options = {
<div class="error">
<span class="status">` + status + '</span>\n <div class="message">\n <h1>' + message + "</h1>\n </div>\n </div>\n </body>\n</html>\n"
},
version_hash: "4jgq38"
version_hash: "9p1c8j"
};
function get_hooks() {
return {};

1
.netlify/server/entries/pages/work/_page.server.ts.js
View file

@ -22,7 +22,6 @@ async function load() {
console.error("No posts found");
return {
posts
// images
};
}
export {

6
.netlify/server/entries/pages/work/_page.svelte.js
View file

@ -44,7 +44,7 @@ const Page = create_ssr_component(($$result, $$props, $$bindings, slots) => {
$$bindings.data(data);
$$result.css.add(css);
return `<h1 class="headline svelte-1wmqw8p" data-svelte-h="svelte-1us57h5"><span class="svelte-1wmqw8p">Casestudies</span></h1> <div class="works svelte-1wmqw8p">${each(data.posts, (work, i) => {
return `<a${add_attribute("href", work.path, 0)} class="work svelte-1wmqw8p">${validate_component(CldImage, "CldImage").$$render(
return `<a data-sveltekit-preload-data${add_attribute("href", work.path, 0)} class="work svelte-1wmqw8p">${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"
},
{},
{}

2
.netlify/server/entries/pages/work/_slug_/_page.server.ts.js
View file

@ -19,8 +19,6 @@ async function load({ params }) {
svg,
video,
Content
// src,
// srcSet
};
} catch (error) {
console.error(error);

11
.netlify/server/entries/pages/work/_slug_/_page.svelte.js
View file

@ -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 ` <div class="heromask svelte-nm1xy1">${validate_component(CldImage, "CldImage").$$render(
return `<div class="heromask svelte-1vxlfgy">${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"
},
{},
{}
)}</div> <div class="subnav svelte-nm1xy1" data-svelte-h="svelte-ywmcpa"><a href="/work" class="subnav-item">← Back</a></div> <article class="work svelte-nm1xy1">${``} </article>`;
)}</div> <div class="subnav svelte-1vxlfgy" data-svelte-h="svelte-ywmcpa"><a href="/work" class="subnav-item">← Back</a></div> <article class="work svelte-1vxlfgy">${``} </article>`;
});
export {
Page as default

2
.netlify/server/manifest-full.js
View file

@ -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')),

2
.netlify/server/manifest.js
View file

@ -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')),

2
.netlify/server/nodes/1.js
View file

@ -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 = [];

2
.netlify/server/nodes/2.js
View file

@ -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 = [];

2
.netlify/server/nodes/6.js
View file

@ -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 = [];

4
.netlify/server/nodes/7.js
View file

@ -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 = [];

39
src/routes/work/[slug]/+page.svelte
View file

@ -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');
})
</script>
<svelte:document class="work" ></svelte:document>
<div class="heromask">
<CldImage
src={data.header_bg_image}
@ -142,12 +139,18 @@
</article>
<style lang="scss">
article {
.work {
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) {
top: 0;
left: 100vw;
}
}
.subnav {
position: fixed;
@ -160,10 +163,10 @@
position: fixed;
top: 0;
left:0;
width: 100%;
z-index: 2;
height: auto;
aspect-ratio: var(--aspect-ratio-heroes);
width: 100%;
height: auto;
z-index: 2;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
:global(.heromask img) {