LukeParke/website
1
0
Fork 0
mirror of https://github.com/LukeHagar/website.git synced 2025-12-06 12:57:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: play around with animation timings

Browse Source
This commit is contained in:
Torsten Dittmann
2023-09-25 21:05:28 +02:00
parent c9a3a3022d
commit d1090ca473
5 changed files with 22 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/lib/animations/Products/Products.svelte
View File

@@ -190,7 +190,7 @@
out:fly={{ duration: 250, y: -300 }}
in:fly={{ duration: 250, delay: 250, y: -300 }}
>
{#if scrollInfo.percentage > 0}
{#if scrollInfo.percentage > -0.15}
<span class="aw-badges aw-eyebrow" transition:slide={{ axis: 'x' }}>Products_</span>
<h2 class="aw-display" transition:fly={{ y: 16, delay: 250 }}>
@@ -360,7 +360,7 @@
padding-inline: 1.25rem;
width: 100%;
height: 80vh;
height: 100vh;
> .main-text {
position: absolute;
@@ -430,7 +430,7 @@
}
&:not(:last-child)[data-active] {
padding-block-end: 4.25rem;
// padding-block-end: 4.25rem;
}
transition: 100ms ease;

14
src/lib/animations/Products/auth/index.ts
View File

@@ -63,30 +63,30 @@ const execute = async () => {
]);
// Start
await safeAnimate(box, { y: [48, 32], opacity: 1 }, { duration: 0.25, delay: 1 })?.finished;
await safeAnimate(box, { y: [48, 32], opacity: 1 }, { duration: 0.25, delay: 0.25 })?.finished;
await sleep(150);
await sleep(50);
await write(emailToSet, (v) => update((p) => ({ ...p, email: v })), 300);
await sleep(150);
await sleep(50);
await write(passwordToSet, (v) => update((p) => ({ ...p, password: v })), 300);
await sleep(500);
await sleep(50);
await safeAnimate(
code,
{ x: [200, 200], y: [460 + 16, 460], opacity: [0, 1] },
{ x: [300, 300], y: [400 + 16, 400], opacity: [0, 1] },
{ duration: 0.25 }
)?.finished;
await sleep(500);
await sleep(350);
update((p) => ({ ...p, submitted: true }));
await sleep(1000);
update((p) => ({ ...p, showControls: true }));
safeAnimate(controls, { x: [420, 420], y: [16, 0], opacity: 1 }, { duration: 0.5 });
safeAnimate(controls, { x: [520, 450], y: [16, -80], opacity: 1 }, { duration: 0.5 });
};
export const authController = {

10
src/lib/animations/Products/databases/index.ts
View File

@@ -37,10 +37,10 @@ const execute = async () => {
await Promise.all([
safeAnimate(phone, { x: 390, y: 0 }, { duration: 0.5 })?.finished,
safeAnimate(box, { x: 0, y: 32, opacity: 1 }, { duration: 0.5 })?.finished,
safeAnimate(code, { x: 80, y: 460, opacity: 1 }, { duration: 0.5 })?.finished
safeAnimate(code, { x: 80, y: 320, opacity: 1 }, { duration: 0.5 })?.finished
]);
await sleep(1000);
await sleep(250);
update((p) => ({
...p,
@@ -53,14 +53,14 @@ const execute = async () => {
}
]
}));
await sleep(500);
await sleep(250);
update((p) => ({
...p,
tableSlice: p.tableSlice + 1
}));
await sleep(500);
await sleep(250);
update((p) => ({
...p,
@@ -74,7 +74,7 @@ const execute = async () => {
]
}));
await sleep(500);
await sleep(250);
update((p) => ({
...p,

2
src/lib/animations/Products/functions/index.ts
View File

@@ -21,7 +21,7 @@ const execute = async () => {
const { update } = state.reset();
await Promise.all([
safeAnimate(phone, { x: 460, y: 0, width: '275px' }, { duration: 0.5 })?.finished,
safeAnimate(phone, { x: 430, y: 0, width: '275px' }, { duration: 0.5 })?.finished,
safeAnimate(code, { x: 0, y: 200, opacity: 0 }, { duration: 0.5 })?.finished,
safeAnimate(box, { opacity: 0 }, { duration: 0.5 })?.finished
]);

12
src/lib/animations/Products/storage/index.ts
View File

@@ -57,14 +57,14 @@ const execute = async () => {
]
}));
await sleep(1000);
await sleep(250);
await Promise.all([
safeAnimate(overlay, { opacity: 1 }, { duration: 0.25 })?.finished,
safeAnimate(drawer, { y: [128, 0], opacity: 1 }, { duration: 0.5 })?.finished
]);
await sleep(1000);
await sleep(250);
await safeAnimate(uploadBtn, { scale: [1, 0.9, 1] }, { duration: 0.25 })?.finished;
@@ -75,7 +75,7 @@ const execute = async () => {
safeAnimate(upload, { y: [-16, 0], opacity: 1 }, { duration: 0.5 })?.finished
]);
await sleep(500);
await sleep(250);
await safeAnimate(box, { x: 300, y: 300 }, { duration: 0 })?.finished;
@@ -84,14 +84,14 @@ const execute = async () => {
safeAnimate(box, { y: [300 - 16, 300], opacity: 1 }, { duration: 1 })?.finished
]);
await sleep(500);
await sleep(250);
await Promise.all([
safeAnimate(uploadText, { opacity: 0 }, { duration: 0.5 })?.finished,
safeAnimate(uploadLoading, { opacity: 1 }, { duration: 0.5 })?.finished,
safeAnimate(uploadImg, { opacity: 0, y: 64 + 8 }, { duration: 0.5 })?.finished
]);
await sleep(500);
await sleep(250);
await safeAnimate(upload, { opacity: 0, y: 48 }, { duration: 0.5 })?.finished;
@@ -108,7 +108,7 @@ const execute = async () => {
]
}));
await sleep(1000);
await sleep(250);
update((p) => ({
...p,