reonokiy/blog
1
0
Fork 0
mirror of https://github.com/reonokiy/blog.nokiy.net.git synced 2025-06-15 11:12:54 +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',
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 8th element
if (allElements.length > 7) {
gsap.to(allElements.slice(7), {
opacity: 1,
y: 0,
duration: 0.5,
delay: 0.2 + 0.05 * 7,
ease: 'power2.out',
})
}
}
// Mobile Animation (for screens smaller than 1536px)

36
src/styles/transition.css
View file

@ -43,19 +43,27 @@ html:not(.reduce-motion) #waline {
opacity: 0;
transform: translateY(3rem);
}
html:not(.reduce-motion) #gsap-post-page-date {
opacity: 0;
transform: translateY(1.5rem);
@media (min-width: 1024px) {
html:not(.reduce-motion) #gsap-post-page-date {
opacity: 0;
transform: translateY(1.5rem);
}
html:not(.reduce-motion) #back-button {
opacity: 0;
transform: translateX(0.5rem);
}
html:not(.reduce-motion) #toc-icon {
opacity: 0;
transform: translateY(0.5rem);
}
html:not(.reduce-motion) #toc-list > * {
opacity: 0;
transform: translateY(1.5rem);
}
}
html:not(.reduce-motion) #back-button {
opacity: 0;
transform: translateX(0.5rem);
}
html:not(.reduce-motion) #toc-icon {
opacity: 0;
transform: translateY(0.5rem);
}
html:not(.reduce-motion) #toc-list > * {
opacity: 0;
transform: translateY(1.5rem);
@media (max-width: 1535px) {
html:not(.reduce-motion) #toc-container {
opacity: 0;
transform: translateY(3rem);
}
}