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

style: update animation duration and delay, fix transition issues on mobile

Browse source
This commit is contained in:
radishzzz 2025-05-19 12:05:34 +01:00
parent 9edc1fc325
commit 120ebbbb3f
7 changed files with 110 additions and 88 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -9,40 +9,38 @@ function setupPostPageAnimation() {
const backButton = document.getElementById('back-button')
const tocIcon = document.getElementById('toc-icon')
const tocContainer = document.getElementById('toc-container')
const isLargeScreen = window.matchMedia('(min-width: 1024px)').matches
const isSmallScreen = window.matchMedia('(max-width: 1535px)').matches
// Post Content + Tags + Comments
// First 15 elements
gsap.from(allElements.slice(0, 15), {
opacity: 0,
y: '2rem',
duration: 0.3,
delay: 0.1,
ease: 'power2.out',
stagger: 0.05,
})
// Rest elements as the 16 element
if (allElements.length > 15) {
gsap.from(allElements.slice(15), {
opacity: 0,
y: '2rem',
duration: 0.3,
delay: 0.1 + 0.05 * 15,
ease: 'power2.out',
})
}
// Desktop Animations
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: '1rem',
duration: 0.3,
delay: 0.1,
y: '1.5rem',
duration: 0.5,
delay: 0.2,
ease: 'power2.out',
})
}
@ -52,8 +50,8 @@ function setupPostPageAnimation() {
gsap.from(tocIcon, {
opacity: 0,
y: '0.5rem',
duration: 0.3,
delay: 0.125,
duration: 0.5,
delay: 0.2,
ease: 'power2.out',
})
}
@ -62,9 +60,9 @@ function setupPostPageAnimation() {
if (tocListChildren.length > 0) {
gsap.from(tocListChildren, {
opacity: 0,
y: '1rem',
duration: 0.3,
delay: 0.15,
y: '1.5rem',
duration: 0.5,
delay: 0.2,
ease: 'power2.out',
stagger: 0.025,
})
@ -75,8 +73,30 @@ function setupPostPageAnimation() {
gsap.from(backButton, {
opacity: 0,
x: '0.5rem',
duration: 0.3,
delay: 0.15,
duration: 0.5,
delay: 0.2,
ease: 'power2.out',
})
}
}
else {
// Post Content + Tags + Comments
// First 7 elements
gsap.from(allElements.slice(0, 7), {
opacity: 0,
y: '3rem',
duration: 0.5,
delay: 0.2,
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',
})
}
@ -86,9 +106,9 @@ function setupPostPageAnimation() {
if (isSmallScreen && tocContainer) {
gsap.from(tocContainer, {
opacity: 0,
y: '2rem',
duration: 0.3,
delay: 0.1,
y: '3rem',
duration: 0.5,
delay: 0.15,
ease: 'power2.out',
})
}