mirror of
https://github.com/reonokiy/blog.nokiy.net.git
synced 2025-06-15 11:12:54 +02:00
a5839a2dd1
- Removed the old copy-action SVG icon and replaced it with a new copy-button SVG icon. - Added a new copy-success SVG icon for visual feedback on copy actions. - Updated Waline component comments for clarity and improved code readability. - Enhanced BackButton component with fallback navigation to homepage. - Improved CodeCopyButton component by refining icon handling and timeout management. - Adjusted GithubCard component's intersection observer root margin for better visibility. - Updated GsapAnimation component variable names for consistency and clarity. - Removed unnecessary styles from PhotoSwipe component. - Modified TOC component styles for better spacing and layout. - Updated multiple theme guide markdown files to correct image hosting URL comments. - Cleaned up extend.css by removing commented-out styles and organizing code. - Added PhotoSwipe background color and KaTeX overflow fixes to global.css. - Enhanced markdown.css with video styling for better responsiveness. - Improved transition.css comments for better understanding of GSAP animation states.
111 lines
2.6 KiB
Text
111 lines
2.6 KiB
Text
<script>
|
|
import { gsap } from 'gsap'
|
|
|
|
function setupPostPageAnimation() {
|
|
// Animated Elements
|
|
const postContent = document.getElementById('gsap-post-page-content')
|
|
const postContentChildren = postContent ? Array.from(postContent.children) : []
|
|
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 backButton = document.getElementById('back-button')
|
|
const postDate = 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) {
|
|
// First 14 elements of post content
|
|
gsap.to(postContentChildren.slice(0, 14), {
|
|
opacity: 1,
|
|
y: 0,
|
|
duration: 0.5,
|
|
delay: 0.2,
|
|
ease: 'power2.out',
|
|
stagger: 0.05,
|
|
})
|
|
// 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 * 14,
|
|
ease: 'power2.out',
|
|
})
|
|
}
|
|
|
|
// Post Date
|
|
if (postDate) {
|
|
gsap.to(postDate, {
|
|
opacity: 1,
|
|
y: 0,
|
|
duration: 0.5,
|
|
delay: 0.15,
|
|
ease: 'power2.out',
|
|
})
|
|
}
|
|
|
|
// TOC Icon
|
|
if (tocIcon) {
|
|
gsap.to(tocIcon, {
|
|
opacity: 1,
|
|
y: 0,
|
|
duration: 0.5,
|
|
delay: 0.25,
|
|
ease: 'power2.out',
|
|
})
|
|
}
|
|
|
|
// Toc List
|
|
if (tocListChildren.length > 0) {
|
|
gsap.to(tocListChildren, {
|
|
opacity: 1,
|
|
y: 0,
|
|
duration: 0.5,
|
|
delay: 0.25,
|
|
ease: 'power2.out',
|
|
stagger: 0.025,
|
|
})
|
|
}
|
|
|
|
// Back Button
|
|
if (backButton) {
|
|
gsap.to(backButton, {
|
|
opacity: 1,
|
|
x: 0,
|
|
duration: 0.5,
|
|
delay: 0.2,
|
|
ease: 'power2.out',
|
|
})
|
|
}
|
|
}
|
|
else {
|
|
// First 7 elements of post content
|
|
gsap.to(postContentChildren.slice(0, 7), {
|
|
opacity: 1,
|
|
y: 0,
|
|
duration: 0.5,
|
|
delay: 0.2,
|
|
ease: 'power2.out',
|
|
stagger: 0.05,
|
|
})
|
|
}
|
|
|
|
// TOC Container
|
|
if (isSmallScreen && tocContainer) {
|
|
gsap.to(tocContainer, {
|
|
opacity: 1,
|
|
y: 0,
|
|
duration: 0.5,
|
|
delay: 0.15,
|
|
ease: 'power2.out',
|
|
})
|
|
}
|
|
}
|
|
|
|
setupPostPageAnimation()
|
|
document.addEventListener('astro:after-swap', setupPostPageAnimation)
|
|
</script>
|