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

style: improve animation effects for gsap, view transitions and highlight-hover

Browse source
This commit is contained in:
radishzzz 2025-05-19 02:20:37 +01:00
parent 653596fc3d
commit bfe3771571
4 changed files with 10 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -17,7 +17,7 @@ function setupPostPageAnimation() {
gsap.from(allElements.slice(0, 15), {
opacity: 0,
y: '2rem',
duration: 0.4,
duration: 0.3,
delay: 0.1,
ease: 'power2.out',
stagger: 0.05,
@ -27,7 +27,7 @@ function setupPostPageAnimation() {
gsap.from(allElements.slice(15), {
opacity: 0,
y: '2rem',
duration: 0.4,
duration: 0.3,
delay: 0.1 + 0.05 * 15,
ease: 'power2.out',
})
@ -40,7 +40,7 @@ function setupPostPageAnimation() {
gsap.from(dateElement, {
opacity: 0,
y: '1rem',
duration: 0.4,
duration: 0.3,
delay: 0.1,
ease: 'power2.out',
})
@ -51,7 +51,7 @@ function setupPostPageAnimation() {
gsap.from(tocIcon, {
opacity: 0,
y: '0.5rem',
duration: 0.4,
duration: 0.3,
delay: 0.125,
ease: 'power2.out',
})
@ -62,7 +62,7 @@ function setupPostPageAnimation() {
gsap.from(tocListChildren, {
opacity: 0,
y: '1rem',
duration: 0.4,
duration: 0.3,
delay: 0.15,
ease: 'power2.out',
stagger: 0.025,
@ -74,7 +74,7 @@ function setupPostPageAnimation() {
gsap.from(backButton, {
opacity: 0,
x: '0.5rem',
duration: 0.4,
duration: 0.3,
delay: 0.15,
ease: 'power2.out',
})
@ -86,7 +86,7 @@ function setupPostPageAnimation() {
gsap.from(tocContainer, {
opacity: 0,
y: '2rem',
duration: 0.4,
duration: 0.3,
delay: 0.1,
ease: 'power2.out',
})

2
src/components/Widgets/TOC.astro
View file

@ -104,7 +104,7 @@ const filteredHeadings = headings.filter(heading =>
/* Initial collapsed state with zero height grid row */
.accordion-wrapper {
--at-apply: 'grid rows-[0fr] transition-all duration-360 ease-in-out';
--at-apply: 'grid rows-[0fr] transition-all duration-350 ease-in-out';
}
.accordion-content {
--at-apply: 'max-h-66 overflow-hidden pl-4 pr-6 2xl:(max-h-[calc(100vh-26rem)] pl-1)';