reonokiy/blog
1
0
Fork 0
mirror of https://github.com/reonokiy/blog.nokiy.net.git synced 2025-06-15 19:22:52 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

style: optimize gsap animations, add preload for stix-Italic

Browse source
This commit is contained in:
radishzzz 2025-05-19 01:48:28 +01:00
parent 1f141963a1
commit 653596fc3d
2 changed files with 14 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/components/Widgets/GsapAnimation.astro
View file

@ -16,8 +16,8 @@ function setupPostPageAnimation() {
// First 15 elements // First 15 elements
gsap.from(allElements.slice(0, 15), { gsap.from(allElements.slice(0, 15), {
opacity: 0, opacity: 0,
y: '3rem', y: '2rem',
duration: 0.5, duration: 0.4,
delay: 0.1, delay: 0.1,
ease: 'power2.out', ease: 'power2.out',
stagger: 0.05, stagger: 0.05,
@ -26,9 +26,9 @@ function setupPostPageAnimation() {
if (allElements.length > 15) { if (allElements.length > 15) {
gsap.from(allElements.slice(15), { gsap.from(allElements.slice(15), {
opacity: 0, opacity: 0,
y: '3rem', y: '2rem',
duration: 0.5, duration: 0.4,
delay: 0.05 * 15 + 0.1, delay: 0.1 + 0.05 * 15,
ease: 'power2.out', ease: 'power2.out',
}) })
} }
@ -39,8 +39,8 @@ function setupPostPageAnimation() {
if (dateElement) { if (dateElement) {
gsap.from(dateElement, { gsap.from(dateElement, {
opacity: 0, opacity: 0,
y: '1.5rem', y: '1rem',
duration: 0.5, duration: 0.4,
delay: 0.1, delay: 0.1,
ease: 'power2.out', ease: 'power2.out',
}) })
@ -51,7 +51,7 @@ function setupPostPageAnimation() {
gsap.from(tocIcon, { gsap.from(tocIcon, {
opacity: 0, opacity: 0,
y: '0.5rem', y: '0.5rem',
duration: 0.5, duration: 0.4,
delay: 0.125, delay: 0.125,
ease: 'power2.out', ease: 'power2.out',
}) })
@ -61,8 +61,8 @@ function setupPostPageAnimation() {
if (tocListChildren.length > 0) { if (tocListChildren.length > 0) {
gsap.from(tocListChildren, { gsap.from(tocListChildren, {
opacity: 0, opacity: 0,
y: '1.5rem', y: '1rem',
duration: 0.5, duration: 0.4,
delay: 0.15, delay: 0.15,
ease: 'power2.out', ease: 'power2.out',
stagger: 0.025, stagger: 0.025,
@ -74,7 +74,7 @@ function setupPostPageAnimation() {
gsap.from(backButton, { gsap.from(backButton, {
opacity: 0, opacity: 0,
x: '0.5rem', x: '0.5rem',
duration: 0.5, duration: 0.4,
delay: 0.15, delay: 0.15,
ease: 'power2.out', ease: 'power2.out',
}) })
@ -85,8 +85,8 @@ function setupPostPageAnimation() {
if (isSmallScreen && tocContainer) { if (isSmallScreen && tocContainer) {
gsap.from(tocContainer, { gsap.from(tocContainer, {
opacity: 0, opacity: 0,
y: '3rem', y: '2rem',
duration: 0.5, duration: 0.4,
delay: 0.1, delay: 0.1,
ease: 'power2.out', ease: 'power2.out',
}) })

1
src/layouts/Head.astro
View file

@ -55,6 +55,7 @@ const pageImage = postSlug
<link rel="preload" href="/fonts/EarlySummer-Subset.woff2" as="font" type="font/woff2" crossorigin /> <link rel="preload" href="/fonts/EarlySummer-Subset.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="/fonts/Snell-Black.woff2" as="font" type="font/woff2" crossorigin /> <link rel="preload" href="/fonts/Snell-Black.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="/fonts/Snell-Bold.woff2" as="font" type="font/woff2" crossorigin /> <link rel="preload" href="/fonts/Snell-Bold.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="/fonts/STIX-Italic.woff2" as="font" type="font/woff2" crossorigin />
{commentEnabled && walineServerURL && <link rel="stylesheet" href="/assets/waline/waline.css" />} {commentEnabled && walineServerURL && <link rel="stylesheet" href="/assets/waline/waline.css" />}
{katexEnabled && <link rel="stylesheet" href={katexCSS} />} {katexEnabled && <link rel="stylesheet" href={katexCSS} />}
<link rel="alternate" href="/rss.xml" type="application/rss+xml" title="RSS Feed" /> <link rel="alternate" href="/rss.xml" type="application/rss+xml" title="RSS Feed" />