diff --git a/src/components/Widgets/GsapAnimation.astro b/src/components/Widgets/GsapAnimation.astro index 95afa51..5eb9cbb 100644 --- a/src/components/Widgets/GsapAnimation.astro +++ b/src/components/Widgets/GsapAnimation.astro @@ -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) diff --git a/src/styles/transition.css b/src/styles/transition.css index d7f4bd9..786bf81 100644 --- a/src/styles/transition.css +++ b/src/styles/transition.css @@ -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); + } }