✨ Finish and animate About page
This commit is contained in:
@@ -11,7 +11,7 @@
|
||||
if (browser) {
|
||||
$smoothScroll = new Lenis({
|
||||
duration: 1.2,
|
||||
easing: (t) => (t === 1 ? 1 : 1 - Math.pow(2, -10 * t)), // https://easings.net/
|
||||
easing: (t: number) => (t === 1 ? 1 : 1 - Math.pow(2, -10 * t)), // https://easings.net/
|
||||
smooth: true,
|
||||
direction: 'vertical',
|
||||
})
|
||||
|
||||
@@ -54,7 +54,7 @@
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="text text-normal">
|
||||
<div class="text text-xsmall">
|
||||
{@html text}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -3,70 +3,12 @@
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
import { navigating } from '$app/stores'
|
||||
import { onMount } from 'svelte'
|
||||
import { stagger, timeline } from 'motion'
|
||||
import { DELAY } from '$utils/contants'
|
||||
import { quartOut } from '$animations/easings'
|
||||
// Components
|
||||
import Image from '$components/atoms/Image.svelte'
|
||||
|
||||
export let type: string = undefined
|
||||
export let title: string
|
||||
export let image: any
|
||||
|
||||
|
||||
onMount(() => {
|
||||
/**
|
||||
* Animations
|
||||
*/
|
||||
// const animation = timeline([
|
||||
// // Hero image
|
||||
// ['.shop-page__background', {
|
||||
// scale: [1.06, 1],
|
||||
// opacity: [0, 1],
|
||||
// }, {
|
||||
// at: 0.4,
|
||||
// duration: 2.4,
|
||||
// }],
|
||||
|
||||
// // Intro top elements
|
||||
// ['.shop-page__intro .top > *', {
|
||||
// y: [-100, 0],
|
||||
// opacity: [0, 1],
|
||||
// }, {
|
||||
// at: 0.4,
|
||||
// delay: stagger(0.25),
|
||||
// }],
|
||||
|
||||
// // Hero title
|
||||
// ['.shop-page__title h1', {
|
||||
// y: [32, 0],
|
||||
// opacity: [0, 1],
|
||||
// }, {
|
||||
// at: 0.5,
|
||||
// }],
|
||||
|
||||
// // Intro navbar
|
||||
// ['.shop-page__nav .container > *, .shop-page__intro .button-cart', {
|
||||
// y: [100, 0],
|
||||
// opacity: [0, 1],
|
||||
// }, {
|
||||
// at: 0.7,
|
||||
// delay: stagger(0.25),
|
||||
// }]
|
||||
// ], {
|
||||
// delay: $navigating ? DELAY.PAGE_LOADING / 1000 : 0,
|
||||
// defaultOptions: {
|
||||
// duration: 1.6,
|
||||
// easing: quartOut,
|
||||
// },
|
||||
// })
|
||||
// animation.stop()
|
||||
|
||||
// // Run animation
|
||||
// requestAnimationFrame(animation.play)
|
||||
})
|
||||
</script>
|
||||
|
||||
<section class="banner">
|
||||
|
||||
@@ -45,6 +45,7 @@
|
||||
['.shop-page__background', {
|
||||
scale: [1.06, 1],
|
||||
opacity: [0, 1],
|
||||
z: 0,
|
||||
}, {
|
||||
at: 0.4,
|
||||
duration: 2.4,
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
import { quartOut as quartOutSvelte } from 'svelte/easing'
|
||||
import { fade, fly } from 'svelte/transition'
|
||||
import type { PageData } from './$types'
|
||||
import { scroll, animate, inView, timeline } from 'motion'
|
||||
import { animate, inView, stagger, timeline } from 'motion'
|
||||
import { map } from '$utils/functions'
|
||||
import { getAssetUrlKey } from '$utils/api'
|
||||
import { DELAY } from '$utils/contants'
|
||||
@@ -19,7 +19,6 @@
|
||||
import Image from '$components/atoms/Image.svelte'
|
||||
import Button from '$components/atoms/Button.svelte'
|
||||
import AboutGridPhoto from '$components/atoms/AboutGridPhoto.svelte'
|
||||
import Heading from '$components/molecules/Heading.svelte'
|
||||
import ProcessStep from '$components/molecules/ProcessStep.svelte'
|
||||
import Banner from '$components/organisms/Banner.svelte'
|
||||
|
||||
@@ -65,62 +64,126 @@
|
||||
/**
|
||||
* Animations
|
||||
*/
|
||||
// const animation = timeline([
|
||||
// // Heading
|
||||
// ['.heading .text', {
|
||||
// y: [24, 0],
|
||||
// opacity: [0, 1],
|
||||
// z: 0,
|
||||
// }, {
|
||||
// at: 0.5,
|
||||
// }],
|
||||
const animation = timeline([
|
||||
// Banner
|
||||
['.banner picture', {
|
||||
scale: [1.06, 1],
|
||||
opacity: [0, 1],
|
||||
z: 0,
|
||||
}, {
|
||||
at: 0.4,
|
||||
duration: 2.4,
|
||||
}],
|
||||
['.banner h1', {
|
||||
y: [32, 0],
|
||||
opacity: [0, 1],
|
||||
}, {
|
||||
at: 0.5,
|
||||
}],
|
||||
['.banner__top > *', {
|
||||
y: [-100, 0],
|
||||
opacity: [0, 1],
|
||||
}, {
|
||||
at: 0.4,
|
||||
delay: stagger(0.25),
|
||||
}],
|
||||
|
||||
// // First photo
|
||||
// [photoFirstEl, {
|
||||
// y: ['10%', 0],
|
||||
// rotate: [0, getComputedStyle(photoFirstEl).getPropertyValue('--rotate')],
|
||||
// opacity: [0, 1],
|
||||
// z: 0,
|
||||
// }, {
|
||||
// at: 0.75,
|
||||
// opacity: {
|
||||
// duration: 1
|
||||
// }
|
||||
// }],
|
||||
// Intro elements
|
||||
['.about__introduction .container > *', {
|
||||
y: ['20%', 0],
|
||||
opacity: [0, 1],
|
||||
z: 0,
|
||||
}, {
|
||||
at: 0.75,
|
||||
delay: stagger(0.25),
|
||||
}],
|
||||
['.first-photo', {
|
||||
y: ['10%', 0],
|
||||
opacity: [0, 1],
|
||||
z: 0,
|
||||
}, {
|
||||
at: 1.2,
|
||||
}],
|
||||
['.first-photo img', {
|
||||
scale: [1.06, 1],
|
||||
opacity: [0, 1],
|
||||
z: 0,
|
||||
}, {
|
||||
at: 1.5,
|
||||
duration: 2.4,
|
||||
}],
|
||||
], {
|
||||
delay: $navigating ? DELAY.PAGE_LOADING / 1000 : 0,
|
||||
defaultOptions: {
|
||||
duration: 1.6,
|
||||
easing: quartOut,
|
||||
},
|
||||
})
|
||||
animation.stop()
|
||||
|
||||
// // Portrait photo
|
||||
// [photoUsEl, {
|
||||
// y: ['10%', 0],
|
||||
// x: [0, '5%'],
|
||||
// rotate: [0, 5],
|
||||
// opacity: [0, 1],
|
||||
// z: 0,
|
||||
// }, {
|
||||
// at: 1,
|
||||
// opacity: {
|
||||
// duration: 1
|
||||
// }
|
||||
// }],
|
||||
// Sections
|
||||
inView('[data-reveal]', ({ target }) => {
|
||||
animate(target, {
|
||||
opacity: [0, 1],
|
||||
y: ['20%', 0],
|
||||
z: 0,
|
||||
}, {
|
||||
delay: 0.2,
|
||||
duration: 1.6,
|
||||
easing: quartOut,
|
||||
})
|
||||
})
|
||||
|
||||
// // Text
|
||||
// ['.about__introduction .text', {
|
||||
// y: [32, 0],
|
||||
// opacity: [0, 1],
|
||||
// z: 0,
|
||||
// }, {
|
||||
// at: 1.2,
|
||||
// }],
|
||||
// ], {
|
||||
// delay: $navigating ? DELAY.PAGE_LOADING / 1000 : 0,
|
||||
// defaultOptions: {
|
||||
// duration: 1.6,
|
||||
// easing: quartOut,
|
||||
// },
|
||||
// })
|
||||
// animation.stop()
|
||||
// Global images
|
||||
inView('[data-reveal-image] img', ({ target }) => {
|
||||
animate(target, {
|
||||
scale: [1.06, 1],
|
||||
opacity: [0, 1],
|
||||
z: 0,
|
||||
}, {
|
||||
delay: 0.3,
|
||||
duration: 2.4,
|
||||
easing: quartOut,
|
||||
})
|
||||
})
|
||||
|
||||
// // Run animation
|
||||
// requestAnimationFrame(animation.play)
|
||||
// Process
|
||||
const processTimeline = timeline([
|
||||
// Step links
|
||||
['.about__process li a', {
|
||||
y: [16, 0],
|
||||
opacity: [0, 1],
|
||||
z: 0,
|
||||
}, {
|
||||
at: 0,
|
||||
delay: stagger(0.15),
|
||||
}],
|
||||
|
||||
// First step
|
||||
['.about__process .step', {
|
||||
scale: [1.1, 1],
|
||||
opacity: [0, 1],
|
||||
x: [20, 0]
|
||||
}, {
|
||||
at: 0.6,
|
||||
duration: 1,
|
||||
}]
|
||||
], {
|
||||
defaultOptions: {
|
||||
duration: 1.6,
|
||||
easing: quartOut,
|
||||
}
|
||||
})
|
||||
processTimeline.stop()
|
||||
|
||||
inView('.about__process', () => {
|
||||
requestAnimationFrame(processTimeline.play)
|
||||
}, {
|
||||
amount: 0.35,
|
||||
})
|
||||
|
||||
// Run animation
|
||||
requestAnimationFrame(animation.play)
|
||||
})
|
||||
|
||||
|
||||
@@ -165,7 +228,7 @@
|
||||
<div class="container grid">
|
||||
<figure class="first-photo">
|
||||
<Image
|
||||
class="shadow-box-dark"
|
||||
class="picture shadow-box-dark"
|
||||
id={about.intro_firstphoto.id}
|
||||
alt={about.intro_firstphoto.title}
|
||||
sizeKey="photo-list"
|
||||
@@ -186,25 +249,28 @@
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
<h2 class="title-small">{about.creation_title}</h2>
|
||||
<div class="heading text-huge">
|
||||
<h2 class="title-small" data-reveal>{about.creation_title}</h2>
|
||||
<div class="heading text-huge" data-reveal>
|
||||
{@html about.creation_heading}
|
||||
</div>
|
||||
|
||||
<div class="text text-small">
|
||||
<div class="text text-small" data-reveal>
|
||||
{@html about.creation_text}
|
||||
</div>
|
||||
<Image
|
||||
class="portrait-photo shadow-box-dark"
|
||||
id={about.creation_portrait.id}
|
||||
alt={about.creation_portrait.title}
|
||||
sizeKey="photo-list"
|
||||
sizes={{
|
||||
small: { width: 400 },
|
||||
medium: { width: 750 },
|
||||
}}
|
||||
ratio={1.425}
|
||||
/>
|
||||
|
||||
<figure class="picture portrait-photo" data-reveal-image>
|
||||
<Image
|
||||
class="shadow-box-dark"
|
||||
id={about.creation_portrait.id}
|
||||
alt={about.creation_portrait.title}
|
||||
sizeKey="photo-list"
|
||||
sizes={{
|
||||
small: { width: 400 },
|
||||
medium: { width: 750 },
|
||||
}}
|
||||
ratio={1.425}
|
||||
/>
|
||||
</figure>
|
||||
<span class="portrait-photo__caption text-info">
|
||||
{about.creation_portrait_caption}
|
||||
</span>
|
||||
@@ -213,28 +279,31 @@
|
||||
|
||||
<section class="about__present">
|
||||
<div class="container grid">
|
||||
<Image
|
||||
class="shadow-box-dark"
|
||||
id={about.present_image.id}
|
||||
alt={about.present_image.title}
|
||||
sizeKey="photo-list"
|
||||
sizes={{
|
||||
small: { width: 400 },
|
||||
medium: { width: 600 },
|
||||
large: { width: 800 },
|
||||
}}
|
||||
ratio={1.5}
|
||||
/>
|
||||
<figure class="picture" data-reveal-image>
|
||||
<Image
|
||||
class="shadow-box-dark"
|
||||
id={about.present_image.id}
|
||||
alt={about.present_image.title}
|
||||
sizeKey="photo-list"
|
||||
sizes={{
|
||||
small: { width: 400 },
|
||||
medium: { width: 600 },
|
||||
large: { width: 800 },
|
||||
}}
|
||||
ratio={1.5}
|
||||
/>
|
||||
</figure>
|
||||
|
||||
<h2 class="title-small">{about.present_title}</h2>
|
||||
|
||||
<div class="text text-small">
|
||||
<h2 class="title-small" data-reveal>{about.present_title}</h2>
|
||||
<div class="text text-small" data-reveal>
|
||||
<p>{about.present_text}</p>
|
||||
</div>
|
||||
<div class="heading text-big">
|
||||
|
||||
<div class="heading text-big" data-reveal>
|
||||
{@html about.present_heading}
|
||||
</div>
|
||||
<div class="conclusion text-small">
|
||||
|
||||
<div class="conclusion text-small" data-reveal>
|
||||
<p>{about.present_conclusion}</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -261,7 +330,7 @@
|
||||
<aside>
|
||||
<div class="heading">
|
||||
<h2 class="title-medium">{about.process_title}</h2>
|
||||
<p class="text-normal">{about.process_subtitle}</p>
|
||||
<p class="text-xsmall">{about.process_subtitle}</p>
|
||||
</div>
|
||||
|
||||
<ol>
|
||||
@@ -312,7 +381,9 @@
|
||||
{#each about.contact_blocks as { title, text, link, button }}
|
||||
<div class="block">
|
||||
<h3 class="text-label">{title}</h3>
|
||||
<p class="text-normal">{text}</p>
|
||||
<div class="text text-normal">
|
||||
{@html text}
|
||||
</div>
|
||||
<div class="button-container">
|
||||
{#if link}
|
||||
{#key emailCopied === link}
|
||||
|
||||
@@ -1,3 +1,15 @@
|
||||
:global(.about) {
|
||||
:global(.picture) {
|
||||
overflow: hidden;
|
||||
background: $color-primary-tertiary20;
|
||||
border-radius: 8px;
|
||||
|
||||
@include bp (md) {
|
||||
border-radius: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.about {
|
||||
/*
|
||||
** Introduction
|
||||
@@ -86,12 +98,6 @@
|
||||
// Figures
|
||||
:global(picture) {
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
|
||||
@include bp (md) {
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
:global(img) {
|
||||
display: block;
|
||||
@@ -239,14 +245,12 @@
|
||||
background-color: $color-cream;
|
||||
|
||||
// Poster image
|
||||
:global(picture) {
|
||||
figure {
|
||||
grid-column: 1 / -1;
|
||||
height: 100vw;
|
||||
max-height: 486px;
|
||||
overflow: hidden;
|
||||
margin-top: -64px;
|
||||
margin-bottom: 72px;
|
||||
border-radius: 8px;
|
||||
|
||||
@include bp (sm) {
|
||||
grid-column: 3 / -6;
|
||||
@@ -371,7 +375,7 @@
|
||||
|
||||
// Heading text
|
||||
.heading {
|
||||
max-width: 400px;
|
||||
max-width: 280px;
|
||||
margin-bottom: 40px;
|
||||
|
||||
@include bp (sm) {
|
||||
@@ -403,6 +407,7 @@
|
||||
li {
|
||||
display: block;
|
||||
margin: 4px 0;
|
||||
overflow: hidden;
|
||||
|
||||
@include bp (sm) {
|
||||
margin: 6px 0;
|
||||
@@ -603,13 +608,24 @@
|
||||
color: $color-secondary-light;
|
||||
font-weight: 600;
|
||||
}
|
||||
p {
|
||||
:global(.text) {
|
||||
margin-bottom: 24px;
|
||||
font-weight: 300;
|
||||
|
||||
@include bp (sm) {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
:global(a) {
|
||||
color: currentColor;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid rgba($color-tertiary, 0.3);
|
||||
transition: color 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: $color-secondary-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Button
|
||||
|
||||
Reference in New Issue
Block a user