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

fix: resolve gsap animation flash on page load

Browse source 
- Add initial state styles for animated elements in CSS
- Change GSAP animations from .from() to .to() method
- Move reduce-motion class from JS to server-side HTML
- Improve performance by eliminating DOM flash
- Enhance code readability with better formatting
This commit is contained in:
radishzzz 2025-05-26 11:12:47 +01:00
parent ead71483ec
commit c1996585a8
5 changed files with 68 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -24,9 +24,9 @@ function setupPostPageAnimation() {
if (isLargeScreen) {
// Post Content + Tags + Comments
// First 15 elements
gsap.from(allElements.slice(0, 15), {
opacity: 0,
y: '3rem',
gsap.to(allElements.slice(0, 15), {
opacity: 1,
y: 0,
duration: 0.5,
delay: 0.2,
ease: 'power2.out',
@ -34,9 +34,9 @@ function setupPostPageAnimation() {
})
// Rest elements as the 16th element
if (allElements.length > 15) {
gsap.from(allElements.slice(15), {
opacity: 0,
y: '3rem',
gsap.to(allElements.slice(15), {
opacity: 1,
y: 0,
duration: 0.5,
delay: 0.2 + 0.05 * 15,
ease: 'power2.out',
@ -45,9 +45,9 @@ function setupPostPageAnimation() {
// Post Date
if (dateElement) {
gsap.from(dateElement, {
opacity: 0,
y: '1.5rem',
gsap.to(dateElement, {
opacity: 1,
y: 0,
duration: 0.5,
delay: 0.2,
ease: 'power2.out',
@ -56,9 +56,9 @@ function setupPostPageAnimation() {
// TOC Icon
if (tocIcon) {
gsap.from(tocIcon, {
opacity: 0,
y: '0.5rem',
gsap.to(tocIcon, {
opacity: 1,
y: 0,
duration: 0.5,
delay: 0.2,
ease: 'power2.out',
@ -67,9 +67,9 @@ function setupPostPageAnimation() {
// Toc List
if (tocListChildren.length > 0) {
gsap.from(tocListChildren, {
opacity: 0,
y: '1.5rem',
gsap.to(tocListChildren, {
opacity: 1,
y: 0,
duration: 0.5,
delay: 0.2,
ease: 'power2.out',
@ -79,9 +79,9 @@ function setupPostPageAnimation() {
// Back Button
if (backButton) {
gsap.from(backButton, {
opacity: 0,
x: '0.5rem',
gsap.to(backButton, {
opacity: 1,
x: 0,
duration: 0.5,
delay: 0.2,
ease: 'power2.out',
@ -91,9 +91,9 @@ function setupPostPageAnimation() {
else {
// Post Content + Tags + Comments
// First 7 elements
gsap.from(allElements.slice(0, 7), {
opacity: 0,
y: '3rem',
gsap.to(allElements.slice(0, 7), {
opacity: 1,
y: 0,
duration: 0.5,
delay: 0.2,
ease: 'power2.out',
@ -113,9 +113,9 @@ function setupPostPageAnimation() {
// Mobile Animation (for screens smaller than 1536px)
if (isSmallScreen && tocContainer) {
gsap.from(tocContainer, {
opacity: 0,
y: '3rem',
gsap.to(tocContainer, {
opacity: 1,
y: 0,
duration: 0.5,
delay: 0.15,
ease: 'power2.out',