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

fix: animations timing

Browse Source
This commit is contained in:
Torsten Dittmann
2023-09-25 22:22:16 +02:00
parent 28b5045ded
commit 9c3ac6b3da
3 changed files with 12 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -131,7 +131,7 @@
remaning: Infinity remaning: Infinity
}; };
const animScale: Scale = [0.1, 1]; const animScale: Scale = [0.075, 1];
const productsScales = products.map((_, idx) => { const productsScales = products.map((_, idx) => {
const diff = animScale[1] - animScale[0]; const diff = animScale[1] - animScale[0];
const step = diff / products.length; const step = diff / products.length;
@@ -192,7 +192,10 @@
}} }}
> >
<div class="sticky-wrapper"> <div class="sticky-wrapper">
{#if scrollInfo.percentage < 0.1} <!-- <div class="debug">
<pre>{scrollInfo.percentage}</pre>
</div> -->
{#if scrollInfo.percentage < 0.075}
<div <div
class="main-text" class="main-text"
out:fly={{ duration: 250, y: -300 }} out:fly={{ duration: 250, y: -300 }}
@@ -221,7 +224,7 @@
class="products" class="products"
out:fly={{ duration: 250, y: 300 }} out:fly={{ duration: 250, y: 300 }}
in:fly={{ duration: 500, delay: 250, y: 300 }} in:fly={{ duration: 500, delay: 250, y: 300 }}
data-active={scrollInfo.percentage > 0.1 ? '' : undefined} data-active={scrollInfo.percentage > 0.075 ? '' : undefined}
> >
<div class="text" id="pd-{$elId}"> <div class="text" id="pd-{$elId}">
<ScrollIndicator percentage={toScale(scrollInfo.percentage, animScale, [0, 1])} /> <ScrollIndicator percentage={toScale(scrollInfo.percentage, animScale, [0, 1])} />
@@ -346,12 +349,6 @@
} }
} }
// .debug {
// position: absolute;
// top: 8rem;
// left: 0;
// }
.sticky-wrapper { .sticky-wrapper {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

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

@@ -56,14 +56,14 @@ const execute = async () => {
const { update } = state.reset(); const { update } = state.reset();
await Promise.all([ await Promise.all([
safeAnimate(box, { x: 310, y: 32, opacity: 0 }, { duration: 0.5 })?.finished, safeAnimate(box, { x: 310, y: 140, opacity: 0 }, { duration: 0.5 })?.finished,
safeAnimate(code, { x: 200, y: 460, opacity: 0 }, { duration: 0.5 })?.finished, safeAnimate(code, { x: 200, y: 460, opacity: 0 }, { duration: 0.5 })?.finished,
safeAnimate(phone, { x: 0, y: 0 }, { duration: 0.5 })?.finished, safeAnimate(phone, { x: 0, y: 0 }, { duration: 0.5 })?.finished,
safeAnimate(controls, { x: 420, y: 0, opacity: 0 }, { duration: 0.5 })?.finished safeAnimate(controls, { x: 420, y: 0, opacity: 0 }, { duration: 0.5 })?.finished
]); ]);
// Start // Start
await safeAnimate(box, { y: [48, 32], opacity: 1 }, { duration: 0.25, delay: 0.25 })?.finished; await safeAnimate(box, { y: [48, 140], opacity: 1 }, { duration: 0.25, delay: 0.25 })?.finished;
await sleep(50); await sleep(50);
@@ -75,7 +75,7 @@ const execute = async () => {
await safeAnimate( await safeAnimate(
code, code,
{ x: [300, 300], y: [400 + 16, 400], opacity: [0, 1] }, { x: [200, 200], y: [460 + 16, 460], opacity: [0, 1] },
{ duration: 0.25 } { duration: 0.25 }
)?.finished; )?.finished;
@@ -86,7 +86,7 @@ const execute = async () => {
await sleep(1000); await sleep(1000);
update((p) => ({ ...p, showControls: true })); update((p) => ({ ...p, showControls: true }));
safeAnimate(controls, { x: [520, 450], y: [16, -80], opacity: 1 }, { duration: 0.5 }); safeAnimate(controls, { x: [420, 420], y: [16, 0], opacity: 1 }, { duration: 0.5 });
}; };
export const authController = { export const authController = {

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

@@ -26,12 +26,12 @@ const execute = async () => {
safeAnimate(box, { opacity: 0 }, { duration: 0.5 })?.finished safeAnimate(box, { opacity: 0 }, { duration: 0.5 })?.finished
]); ]);
await sleep(500); await sleep(250);
await safeAnimate(code, { zIndex: 0 }, { duration: 0 })?.finished; await safeAnimate(code, { zIndex: 0 }, { duration: 0 })?.finished;
await safeAnimate(code, { y: [200 - 16, 200], opacity: 1 }, { duration: 0.5 })?.finished; await safeAnimate(code, { y: [200 - 16, 200], opacity: 1 }, { duration: 0.5 })?.finished;
await sleep(500); await sleep(250);
update((p) => ({ update((p) => ({
...p, ...p,