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

interruptible animations

Browse Source
This commit is contained in:
tglide
2023-09-11 12:49:12 +01:00
parent f363dd3a9d
commit df5694c3e5
1 changed files with 69 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
src/lib/animations/OpenSource.svelte
View File

@@ -11,54 +11,66 @@
y: { easing: spring(springOptions) }
};
const animations: {
mobile: Animation;
desktop: Animation;
}[] = browser
? [
{
mobile: animation('#oss-discord', { x: [-1200, 0], y: 0, rotate: 1 }, animationOptions),
desktop: animation(
'#oss-discord',
{ x: [-100, 20], y: ['0vh', '-80vh'], rotate: 15 },
animationOptions
)
},
{
mobile: animation('#oss-github', { x: [-1200, 0], y: -10, rotate: -2 }, animationOptions),
desktop: animation(
'#oss-github',
{ rotate: 6.26, x: [0, -100], y: ['0vh', '-55vh'] },
animationOptions
)
},
{
mobile: animation('#oss-twitter', { x: [-1200, 0], y: 10, rotate: -3 }, animationOptions),
desktop: animation(
'#oss-twitter',
{ rotate: -15, x: [0, 100], y: ['0vh', '-70vh'] },
animationOptions
)
},
{
mobile: animation('#oss-youtube', { x: [-1200, 0], y: 5, rotate: 2 }, animationOptions),
desktop: animation(
'#oss-youtube',
{ rotate: -3.77, x: [0, -100], y: ['0vh', '-55vh'] },
animationOptions
)
},
{
mobile: animation('#oss-commits', { x: [-1200, 0], y: -4, rotate: -1 }, animationOptions),
desktop: animation(
'#oss-commits',
{ rotate: -10.2, x: [0, 100], y: ['0vh', '-80vh'] },
animationOptions
)
}
]
: [];
mobile: {
main: Animation;
reversed: Animation;
};
desktop: {
main: Animation;
reversed: Animation;
};
}[] = [
{
mobile: {
main: animation('#oss-discord', { x: 0, y: 0, rotate: 1 }, animationOptions),
reversed: animation('#oss-discord', { x: -1200, y: 0, rotate: 1 }, animationOptions)
},
desktop: {
main: animation('#oss-discord', { x: 20, y: '-80vh', rotate: 15 }, animationOptions),
reversed: animation('#oss-discord', { x: -100, y: '0vh', rotate: 15 }, animationOptions)
}
},
{
mobile: {
main: animation('#oss-github', { x: 0, y: -10, rotate: -2 }, animationOptions),
reversed: animation('#oss-github', { x: -1200, y: 10, rotate: -2 }, animationOptions)
},
desktop: {
main: animation('#oss-github', { x: -100, y: '-55vh', rotate: 6.26 }, animationOptions),
reversed: animation('#oss-github', { x: 0, y: '0vh', rotate: 6.26 }, animationOptions)
}
},
{
mobile: {
main: animation('#oss-twitter', { x: 0, y: 10, rotate: -3 }, animationOptions),
reversed: animation('#oss-twitter', { x: -1200, y: -10, rotate: -3 }, animationOptions)
},
desktop: {
main: animation('#oss-twitter', { x: 100, y: '-70vh', rotate: -15 }, animationOptions),
reversed: animation('#oss-twitter', { x: 0, y: '0vh', rotate: -15 }, animationOptions)
}
},
{
mobile: {
main: animation('#oss-youtube', { x: 0, y: 5, rotate: 2 }, animationOptions),
reversed: animation('#oss-youtube', { x: -1200, y: -5, rotate: 2 }, animationOptions)
},
desktop: {
main: animation('#oss-youtube', { x: -100, y: '-55vh', rotate: -3.77 }, animationOptions),
reversed: animation('#oss-youtube', { x: 0, y: '0vh', rotate: -3.77 }, animationOptions)
}
},
{
mobile: {
main: animation('#oss-commits', { x: 0, y: -4, rotate: -1 }, animationOptions),
reversed: animation('#oss-commits', { x: -1200, y: 4, rotate: -1 }, animationOptions)
},
desktop: {
main: animation('#oss-commits', { x: 100, y: '-80vh', rotate: -10.2 }, animationOptions),
reversed: animation('#oss-commits', { x: 0, y: '0vh', rotate: -10.2 }, animationOptions)
}
}
];
const animScale: Scale = [0, animations.length - 1];
const percentScale: Scale = [0.1, 0.8];
@@ -68,9 +80,13 @@
return {
percentage: toScale(i, animScale, percentScale),
whenAfter() {
const anim = isMobile() ? mobile : desktop;
anim.play();
return anim.reverse;
const { main, reversed } = isMobile() ? mobile : desktop;
const { stop } = main.play();
return () => {
stop();
reversed.play();
};
}
};
})
@@ -102,7 +118,6 @@
<div
class="aw-card is-white aw-u-min-block-size-320 u-flex-vertical oss-card"
id="oss-discord"
style="--card-padding:2rem"
>
<div class="u-flex-vertical u-main-space-between u-gap-32">
<span class="aw-icon-discord aw-u-font-size-40" aria-hidden="true" aria-label="Discord" />
@@ -113,7 +128,6 @@
<div
class="aw-card is-white aw-u-min-block-size-320 u-flex-vertical oss-card"
id="oss-github"
style="--card-padding:2rem"
>
<div class="u-flex-vertical u-main-space-between u-gap-32">
<span class="aw-icon-github aw-u-font-size-40" aria-hidden="true" aria-label="GitHub" />
@@ -124,7 +138,6 @@
<div
class="aw-card is-white aw-u-min-block-size-320 u-flex-vertical oss-card"
id="oss-twitter"
style="--card-padding:2rem"
>
<div class="u-flex-vertical u-main-space-between u-gap-32">
<span class="aw-icon-twitter aw-u-font-size-40" aria-hidden="true" aria-label="Twitter" />
@@ -135,7 +148,6 @@
<div
class="aw-card is-white aw-u-min-block-size-320 u-flex-vertical oss-card"
id="oss-youtube"
style="--card-padding:2rem"
>
<div class="u-flex-vertical u-main-space-between u-gap-32">
<span class="aw-icon-youtube aw-u-font-size-40" aria-hidden="true" aria-label="YouTube" />
@@ -146,7 +158,6 @@
<div
class="aw-card is-white aw-u-min-block-size-320 u-flex-vertical oss-card"
id="oss-commits"
style="--card-padding:2rem"
>
<div class="u-flex-vertical u-main-space-between u-gap-32">
<span class="aw-icon-github aw-u-font-size-40" aria-hidden="true" aria-label="GitHub" />
@@ -216,6 +227,8 @@
);
backdrop-filter: blur(10px);
--card-padding: 2rem;
--w: clamp(306px, 50vw, 22.125rem);
--h: 20.125rem;
width: var(--w);