m/portfolio
1
0
Fork 0
mirror of https://github.com/kremalicious/portfolio.git synced 2024-12-22 17:23:22 +01:00
Code Releases Activity

animation tweaks

Browse Source
This commit is contained in:
Matthias Kretschmann 2022-11-16 22:36:38 +00:00
parent 127e3a4317
commit 98f1d88db8
Signed by: m
GPG Key ID: 606EEEF3C479A91F
2 changed files with 31 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
scripts/favicon.ts
View File

@ -16,10 +16,10 @@ const outputManifest = path.resolve(
// https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs // https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs
const sizes = [32, 180, 192, 512] const sizes = [32, 180, 192, 512]
const outputMeta = ` const outputMeta = `
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml"> <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/manifest/manifest.webmanifest"> <link rel="manifest" href="/manifest/manifest.webmanifest" />
` `
function createManifest(iconsizes: number[]) { function createManifest(iconsizes: number[]) {

56
src/components/Transitions.ts
View File

@ -1,34 +1,7 @@
export const moveInTop = { export const moveInTop = {
initial: { initial: {
opacity: 0, opacity: 0,
y: -100, y: -50,
transition: {
type: 'spring'
}
},
enter: {
opacity: 1,
y: 0,
transition: {
type: 'spring',
duration: 0.3,
stiffness: 120
}
},
exit: {
opacity: 0,
y: -100,
transition: {
type: 'spring',
duration: 0.2
}
}
}
export const moveInBottom = {
initial: {
opacity: 0,
y: 100,
transition: { type: 'spring' } transition: { type: 'spring' }
}, },
enter: { enter: {
@ -42,7 +15,32 @@ export const moveInBottom = {
}, },
exit: { exit: {
opacity: 0, opacity: 0,
y: 100, y: -50,
transition: {
type: 'spring',
duration: 0.2
}
}
}
export const moveInBottom = {
initial: {
opacity: 0,
y: 50,
transition: { type: 'spring' }
},
enter: {
opacity: 1,
y: 0,
transition: {
type: 'spring',
duration: 0.4,
stiffness: 120
}
},
exit: {
opacity: 0,
y: 50,
transition: { transition: {
type: 'spring' type: 'spring'
} }