mirror of
https://github.com/reonokiy/blog.nokiy.net.git
synced 2025-06-15 19:22:52 +02:00
4d247cfb93
- 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
128 lines
3.2 KiB
Text
128 lines
3.2 KiB
Text
<script>
|
|
import { gsap } from 'gsap'
|
|
|
|
function setupPostPageAnimation() {
|
|
// 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
|
|
|
|
if (isLargeScreen) {
|
|
// Post Content + Tags + Comments
|
|
// First 15 elements
|
|
gsap.from(allElements.slice(0, 15), {
|
|
opacity: 0,
|
|
y: '3rem',
|
|
duration: 0.5,
|
|
delay: 0.2,
|
|
ease: 'power2.out',
|
|
stagger: 0.05,
|
|
})
|
|
// Rest elements as the 16th element
|
|
if (allElements.length > 15) {
|
|
gsap.from(allElements.slice(15), {
|
|
opacity: 0,
|
|
y: '3rem',
|
|
duration: 0.5,
|
|
delay: 0.2 + 0.05 * 15,
|
|
ease: 'power2.out',
|
|
})
|
|
}
|
|
|
|
// Post Date
|
|
if (dateElement) {
|
|
gsap.from(dateElement, {
|
|
opacity: 0,
|
|
y: '1.5rem',
|
|
duration: 0.5,
|
|
delay: 0.2,
|
|
ease: 'power2.out',
|
|
})
|
|
}
|
|
|
|
// TOC Icon
|
|
if (tocIcon) {
|
|
gsap.from(tocIcon, {
|
|
opacity: 0,
|
|
y: '0.5rem',
|
|
duration: 0.5,
|
|
delay: 0.2,
|
|
ease: 'power2.out',
|
|
})
|
|
}
|
|
|
|
// Toc List
|
|
if (tocListChildren.length > 0) {
|
|
gsap.from(tocListChildren, {
|
|
opacity: 0,
|
|
y: '1.5rem',
|
|
duration: 0.5,
|
|
delay: 0.2,
|
|
ease: 'power2.out',
|
|
stagger: 0.025,
|
|
})
|
|
}
|
|
|
|
// Back Button
|
|
if (backButton) {
|
|
gsap.from(backButton, {
|
|
opacity: 0,
|
|
x: '0.5rem',
|
|
duration: 0.5,
|
|
delay: 0.2,
|
|
ease: 'power2.out',
|
|
})
|
|
}
|
|
}
|
|
else {
|
|
// Post Content + Tags + Comments
|
|
// First 5 elements
|
|
gsap.from(allElements.slice(0, 5), {
|
|
opacity: 0,
|
|
y: '3rem',
|
|
duration: 0.5,
|
|
delay: 0.2,
|
|
ease: 'power2.out',
|
|
stagger: 0.05,
|
|
})
|
|
// 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)
|
|
if (isSmallScreen && tocContainer) {
|
|
gsap.from(tocContainer, {
|
|
opacity: 0,
|
|
y: '3rem',
|
|
duration: 0.5,
|
|
delay: 0.15,
|
|
ease: 'power2.out',
|
|
})
|
|
}
|
|
}
|
|
|
|
setupPostPageAnimation()
|
|
document.addEventListener('astro:after-swap', setupPostPageAnimation)
|
|
</script>
|