Animated intro - #34
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThe changes reactivate and update GSAP-based heading animations in the About page's intro component, adjusting the animation's vertical offset and stagger timing. Simultaneously, the CSS animation for the word slider is simplified, reducing its duration and condensing its keyframes to only two points, with the previous detailed keyframes commented out. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~7 minutes Possibly related PRs
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
src/app/about/_components/animated-intro.tsxOops! Something went wrong! :( ESLint: 9.23.0 ESLint couldn't find an eslint.config.(js|mjs|cjs) file. From ESLint v9.0.0, the default configuration file is now eslint.config.js. https://eslint.org/docs/latest/use/configure/migration-guide If you still have problems after following the migration guide, please stop by src/app/about/_components/animated-intro.cssOops! Something went wrong! :( ESLint: 9.23.0 ESLint couldn't find an eslint.config.(js|mjs|cjs) file. From ESLint v9.0.0, the default configuration file is now eslint.config.js. https://eslint.org/docs/latest/use/configure/migration-guide If you still have problems after following the migration guide, please stop by Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. ✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File ( |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/app/about/_components/animated-intro.css (1)
23-30: Simplified keyframes may affect animation smoothness.The keyframe animation has been simplified from 8 steps to just 2 steps (0% and 50%). While this reduces complexity, it may result in less smooth transitions between text items. Consider if the jump from -1% to -56% provides adequate visual continuity for users.
If smoother transitions are desired, you could add intermediate keyframes:
@keyframes wordSlider { 0% { transform: translateY(-1%); } + 25% {+ transform: translateY(-28%);+ } 50% { transform: translateY(-56%); } }src/app/about/_components/animated-intro.tsx (1)
8-23: Excellent accessibility implementation with GSAP animations.The animation implementation demonstrates several best practices:
- Properly respects
prefers-reduced-motionuser preference- Uses appropriate GSAP animation parameters
- Clean separation of reduced motion and animated states
Consider extracting animation constants for better maintainability:
+const ANIMATION_CONFIG = {+ offset: 60,+ stagger: 0.1,+ duration: 1,+ ease: "power2.inOut"+} as const; useGSAP(() => { // ... motion preference check ... gsap.fromTo( ".hero-text h1", - { y: 60, opacity: 0 },- { y: 0, opacity: 1, stagger: 0.1, duration: 1, ease: "power2.inOut" },+ { y: ANIMATION_CONFIG.offset, opacity: 0 },+ { + y: 0, + opacity: 1, + stagger: ANIMATION_CONFIG.stagger, + duration: ANIMATION_CONFIG.duration, + ease: ANIMATION_CONFIG.ease + }, ); }, []);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/app/about/_components/animated-intro.css(2 hunks)src/app/about/_components/animated-intro.tsx(1 hunks)
🔇 Additional comments (3)
src/app/about/_components/animated-intro.css (2)
20-20: Animation duration reduced for better user experience.The animation duration reduction from 12s to 10s improves the pacing of the text slider animation.
32-57: Good practice keeping the previous implementation as reference.Commenting out the previous detailed keyframes instead of deleting them provides useful reference for future adjustments.
src/app/about/_components/animated-intro.tsx (1)
4-5: GSAP imports properly activated.The GSAP imports are correctly uncommented to enable the animation functionality.
Animated intro
Summary by CodeRabbit
Style
New Features