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

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), { gsap.from(allElements.slice(0, 15), {
opacity: 0, opacity: 0,
y: '2rem', y: '2rem',
duration: 0.4, duration: 0.3,
delay: 0.1, delay: 0.1,
ease: 'power2.out', ease: 'power2.out',
stagger: 0.05, stagger: 0.05,
@ -27,7 +27,7 @@ function setupPostPageAnimation() {
gsap.from(allElements.slice(15), { gsap.from(allElements.slice(15), {
opacity: 0, opacity: 0,
y: '2rem', y: '2rem',
duration: 0.4, duration: 0.3,
delay: 0.1 + 0.05 * 15, delay: 0.1 + 0.05 * 15,
ease: 'power2.out', ease: 'power2.out',
}) })
@ -40,7 +40,7 @@ function setupPostPageAnimation() {
gsap.from(dateElement, { gsap.from(dateElement, {
opacity: 0, opacity: 0,
y: '1rem', y: '1rem',
duration: 0.4, duration: 0.3,
delay: 0.1, delay: 0.1,
ease: 'power2.out', ease: 'power2.out',
}) })
@ -51,7 +51,7 @@ function setupPostPageAnimation() {
gsap.from(tocIcon, { gsap.from(tocIcon, {
opacity: 0, opacity: 0,
y: '0.5rem', y: '0.5rem',
duration: 0.4, duration: 0.3,
delay: 0.125, delay: 0.125,
ease: 'power2.out', ease: 'power2.out',
}) })
@ -62,7 +62,7 @@ function setupPostPageAnimation() {
gsap.from(tocListChildren, { gsap.from(tocListChildren, {
opacity: 0, opacity: 0,
y: '1rem', y: '1rem',
duration: 0.4, duration: 0.3,
delay: 0.15, delay: 0.15,
ease: 'power2.out', ease: 'power2.out',
stagger: 0.025, stagger: 0.025,
@ -74,7 +74,7 @@ function setupPostPageAnimation() {
gsap.from(backButton, { gsap.from(backButton, {
opacity: 0, opacity: 0,
x: '0.5rem', x: '0.5rem',
duration: 0.4, duration: 0.3,
delay: 0.15, delay: 0.15,
ease: 'power2.out', ease: 'power2.out',
}) })
@ -86,7 +86,7 @@ function setupPostPageAnimation() {
gsap.from(tocContainer, { gsap.from(tocContainer, {
opacity: 0, opacity: 0,
y: '2rem', y: '2rem',
duration: 0.4, duration: 0.3,
delay: 0.1, delay: 0.1,
ease: 'power2.out', 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 */ /* Initial collapsed state with zero height grid row */
.accordion-wrapper { .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 { .accordion-content {
--at-apply: 'max-h-66 overflow-hidden pl-4 pr-6 2xl:(max-h-[calc(100vh-26rem)] pl-1)'; --at-apply: 'max-h-66 overflow-hidden pl-4 pr-6 2xl:(max-h-[calc(100vh-26rem)] pl-1)';

2
src/styles/global.css
View file

@ -61,7 +61,7 @@ h4:hover .heading-anchor-link svg:hover {
--at-apply: 'origin-bottom-left scale-x-100'; --at-apply: 'origin-bottom-left scale-x-100';
} }
.highlight-hover::after { .highlight-hover::after {
--at-apply: 'origin-bottom-right scale-x-0 transition-transform duration-150 ease-out lg:duration-300'; --at-apply: 'origin-bottom-right scale-x-0 transition-transform duration-150 ease-out lg:duration-225';
} }
/* Fix Highlight Position Issue on iOS */ /* Fix Highlight Position Issue on iOS */

2
src/styles/transition.css
View file

@ -1,6 +1,6 @@
/* View Transition */ /* View Transition */
::view-transition-new(animation-theme-toggle) { ::view-transition-new(animation-theme-toggle) {
animation: reveal 1s cubic-bezier(0.4, 0, 0.2, 1); animation: reveal 0.75s cubic-bezier(0.645, 0.045, 0.355, 1);
clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0);
z-index: 99; z-index: 99;
} }