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

✨ feat: add reducemotion config option to optimize performance

Browse source 
- Add `reduceMotion` option in theme config to improve performance
- Update Button component to support reduced animations
- Modify GSAP animation logic to adapt to the new configuration
- Update documentation to reflect the new feature
This commit is contained in:
radishzzz 2025-05-19 14:54:59 +01:00
parent 120ebbbb3f
commit 4d247cfb93
12 changed files with 77 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -2,13 +2,22 @@
import { gsap } from 'gsap'
function setupPostPageAnimation() {
const allElements = Array.from(document.querySelectorAll('#gsap-post-page-content > *, #gsap-post-page-tags, #waline'))
// Post Content + Tags + Comments
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 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')
// Screen Size Check
const isLargeScreen = window.matchMedia('(min-width: 1024px)').matches
const isSmallScreen = window.matchMedia('(max-width: 1535px)').matches
@ -81,8 +90,8 @@ function setupPostPageAnimation() {
}
else {
// Post Content + Tags + Comments
// First 7 elements
gsap.from(allElements.slice(0, 7), {
// First 5 elements
gsap.from(allElements.slice(0, 5), {
opacity: 0,
y: '3rem',
duration: 0.5,
@ -90,16 +99,16 @@ function setupPostPageAnimation() {
ease: 'power2.out',
stagger: 0.05,
})
// Rest elements as the 8 element
if (allElements.length > 7) {
gsap.from(allElements.slice(7), {
opacity: 0,
y: '3rem',
duration: 0.5,
delay: 0.2 + 0.05 * 5,
ease: 'power2.out',
})
}
// Rest elements as the 6 element
// if (allElements.length > 5) {
// gsap.from(allElements.slice(7), {
// opacity: 0,
// y: '3rem',
// duration: 0.5,
// delay: 0.2 + 0.05 * 5,
// ease: 'power2.out',
// })
// }
}
// Mobile Animation (for screens smaller than 1536px)