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

feat: performance optimizations and ui improvements (#26)

Browse source 
* test: remove astro-compress

* test: remove astro-compress

* perf: add astro-compress, optimize resource preloading

* perf: moving photoswipe styles to head with non-blocking preload strategy

* test: disable astro-compress

* test: enable astro-compress

* fix: typescript hints

* chore: adjust toc style and gsap animation

* style: optimize gsap animation logic, adjust toc style

* chore: adjust toc style

* fix: photoswipe transition position offset caused by scrollbar-gutter
This commit is contained in:
radishzz 2025-05-26 20:21:38 +01:00 • committed by GitHub
parent 054aa85509
commit 47e1df9b3d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 64 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -2,29 +2,23 @@
import { gsap } from 'gsap'
function setupPostPageAnimation() {
// Post Content + Tags + Comments
// Elements
const postContent = document.getElementById('gsap-post-page-content')
const postContentChildren = postContent ? Array.from(postContent.children) : []
const tagsElement = document.getElementById('gsap-post-page-tags')
const walineElement = document.getElementById('waline')
const allElements = [...postContentChildren, tagsElement, walineElement].filter(Boolean)
// TOC + Date + Back Button + TOC Icon
const tocContainer = document.getElementById('toc-container')
const tocIcon = document.getElementById('toc-icon')
const tocList = document.getElementById('toc-list')
const tocListChildren = tocList ? Array.from(tocList.children) : []
const dateElement = document.getElementById('gsap-post-page-date')
const backButton = document.getElementById('back-button')
const tocIcon = document.getElementById('toc-icon')
const tocContainer = document.getElementById('toc-container')
const dateElement = document.getElementById('gsap-post-page-date')
// Screen Size Check
const isLargeScreen = window.matchMedia('(min-width: 1024px)').matches
const isSmallScreen = window.matchMedia('(max-width: 1535px)').matches
if (isLargeScreen) {
// Post Content + Tags + Comments
// First 15 elements
gsap.to(allElements.slice(0, 15), {
// First 14 elements of post content
gsap.to(postContentChildren.slice(0, 14), {
opacity: 1,
y: 0,
duration: 0.5,
@ -32,13 +26,13 @@ function setupPostPageAnimation() {
ease: 'power2.out',
stagger: 0.05,
})
// Rest elements as the 16th element
if (allElements.length > 15) {
gsap.to(allElements.slice(15), {
// Rest elements of post content as the 15th element
if (postContentChildren.length > 14) {
gsap.to(postContentChildren.slice(14), {
opacity: 1,
y: 0,
duration: 0.5,
delay: 0.2 + 0.05 * 15,
delay: 0.2 + 0.05 * 14,
ease: 'power2.out',
})
}
@ -49,7 +43,7 @@ function setupPostPageAnimation() {
opacity: 1,
y: 0,
duration: 0.5,
delay: 0.2,
delay: 0.15,
ease: 'power2.out',
})
}
@ -60,7 +54,7 @@ function setupPostPageAnimation() {
opacity: 1,
y: 0,
duration: 0.5,
delay: 0.2,
delay: 0.25,
ease: 'power2.out',
})
}
@ -71,7 +65,7 @@ function setupPostPageAnimation() {
opacity: 1,
y: 0,
duration: 0.5,
delay: 0.2,
delay: 0.25,
ease: 'power2.out',
stagger: 0.025,
})
@ -89,9 +83,8 @@ function setupPostPageAnimation() {
}
}
else {
// Post Content + Tags + Comments
// First 6 elements
gsap.to(allElements.slice(0, 6), {
// First 7 elements of post content
gsap.to(postContentChildren.slice(0, 7), {
opacity: 1,
y: 0,
duration: 0.5,
@ -99,19 +92,9 @@ function setupPostPageAnimation() {
ease: 'power2.out',
stagger: 0.05,
})
// Rest elements as the 7th element
if (allElements.length > 6) {
gsap.to(allElements.slice(6), {
opacity: 1,
y: 0,
duration: 0.5,
delay: 0.2 + 0.05 * 6,
ease: 'power2.out',
})
}
}
// Mobile Animation (for screens smaller than 1536px)
// TOC Container
if (isSmallScreen && tocContainer) {
gsap.to(tocContainer, {
opacity: 1,