fix: resolve gsap animation flash on page load

- 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

16
pnpm-lock.yaml generated
View file

@ -1927,8 +1927,8 @@ packages:
eslint-flat-config-utils@2.1.0:
resolution: {integrity: sha512-6fjOJ9tS0k28ketkUcQ+kKptB4dBZY2VijMZ9rGn8Cwnn1SH0cZBoPXT8AHBFHxmHcLFQK9zbELDinZ2Mr1rng==}
eslint-import-context@0.1.4:
resolution: {integrity: sha512-x3+etvB5TPxjFIq2m4tTnpt/9Ekp5GZKzXNp5ExLaS7Qv9E5BVs/Td7jxSnRtSzrgTCExXZlc0MuOdSuDLURiQ==}
eslint-import-context@0.1.5:
resolution: {integrity: sha512-jalO1mLiEvTv0io0koz1AE4LwkHQxDBFLaSXWweWtJR0y/NC1yyxvU61Z54bghIFNeM1M4TvwRwVRhLunQJ3gw==}
engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
peerDependencies:
unrs-resolver: ^1.0.0
@ -1977,8 +1977,8 @@ packages:
peerDependencies:
eslint: '>=8'
eslint-plugin-import-x@4.13.1:
resolution: {integrity: sha512-Ua4HZBmG5TNr18q3Is+nT6mKCzNNpycqtv/+TkIK7E3w4LBlPlZI6vLwmDjXdIZtJPP2Z1Oh5+wksWwlcCjMpA==}
eslint-plugin-import-x@4.13.3:
resolution: {integrity: sha512-CDewJDEeYQhm94KGCDYiuwU1SdaWc/vh+SziSKkF7kichAqAFnQYtSYUvSwSBbiBjYLxV5uUxocxxQobRI9YXA==}
engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
peerDependencies:
eslint: ^8.57.0 || ^9.0.0
@ -4068,7 +4068,7 @@ snapshots:
eslint-merge-processors: 2.0.0(eslint@9.27.0(jiti@2.4.2))
eslint-plugin-antfu: 3.1.1(eslint@9.27.0(jiti@2.4.2))
eslint-plugin-command: 3.2.1(eslint@9.27.0(jiti@2.4.2))
eslint-plugin-import-x: 4.13.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
eslint-plugin-import-x: 4.13.3(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
eslint-plugin-jsdoc: 50.6.17(eslint@9.27.0(jiti@2.4.2))
eslint-plugin-jsonc: 2.20.1(eslint@9.27.0(jiti@2.4.2))
eslint-plugin-n: 17.18.0(eslint@9.27.0(jiti@2.4.2))
@ -6063,7 +6063,7 @@ snapshots:
dependencies:
pathe: 2.0.3
eslint-import-context@0.1.4(unrs-resolver@1.7.2):
eslint-import-context@0.1.5(unrs-resolver@1.7.2):
dependencies:
get-tsconfig: 4.10.1
stable-hash: 0.0.5
@ -6118,13 +6118,13 @@ snapshots:
eslint: 9.27.0(jiti@2.4.2)
eslint-compat-utils: 0.5.1(eslint@9.27.0(jiti@2.4.2))
eslint-plugin-import-x@4.13.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3):
eslint-plugin-import-x@4.13.3(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3):
dependencies:
'@typescript-eslint/utils': 8.32.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
comment-parser: 1.4.1
debug: 4.4.1
eslint: 9.27.0(jiti@2.4.2)
eslint-import-context: 0.1.4(unrs-resolver@1.7.2)
eslint-import-context: 0.1.5(unrs-resolver@1.7.2)
eslint-import-resolver-node: 0.3.9
is-glob: 4.0.3
minimatch: 10.0.1