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

fix: gsap animition elements initial states

Browse source
This commit is contained in:
radishzzz 2025-05-26 11:40:59 +01:00
parent c1996585a8
commit 1318a213c7
2 changed files with 32 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -99,16 +99,16 @@ function setupPostPageAnimation() {
ease: 'power2.out', ease: 'power2.out',
stagger: 0.05, stagger: 0.05,
}) })
// Rest elements as the 8 element // Rest elements as the 8th element
// if (allElements.length > 7) { if (allElements.length > 7) {
// gsap.from(allElements.slice(7), { gsap.to(allElements.slice(7), {
// opacity: 0, opacity: 1,
// y: '3rem', y: 0,
// duration: 0.5, duration: 0.5,
// delay: 0.2 + 0.05 * 5, delay: 0.2 + 0.05 * 7,
// ease: 'power2.out', ease: 'power2.out',
// }) })
// } }
} }
// Mobile Animation (for screens smaller than 1536px) // Mobile Animation (for screens smaller than 1536px)

8
src/styles/transition.css
View file

@ -43,6 +43,7 @@ html:not(.reduce-motion) #waline {
opacity: 0; opacity: 0;
transform: translateY(3rem); transform: translateY(3rem);
} }
@media (min-width: 1024px) {
html:not(.reduce-motion) #gsap-post-page-date { html:not(.reduce-motion) #gsap-post-page-date {
opacity: 0; opacity: 0;
transform: translateY(1.5rem); transform: translateY(1.5rem);
@ -59,3 +60,10 @@ html:not(.reduce-motion) #toc-list > * {
opacity: 0; opacity: 0;
transform: translateY(1.5rem); transform: translateY(1.5rem);
} }
}
@media (max-width: 1535px) {
html:not(.reduce-motion) #toc-container {
opacity: 0;
transform: translateY(3rem);
}
}