simplified animation - #33
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThe animation duration for the Changes
Possibly related PRs
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (7)
💤 Files with no reviewable changes (1)
✅ Files skipped from review due to trivial changes (6)
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: 1
🧹 Nitpick comments (1)
src/app/about/_components/animated-intro.tsx (1)
4-5: Consider removing commented imports entirely.Since GSAP functionality has been disabled, consider removing these commented import statements completely to reduce code clutter, unless this change is intended to be temporary.
-// import { useGSAP } from "@gsap/react";-// import gsap from "gsap";
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/app/about/_components/animated-intro.css(1 hunks)src/app/about/_components/animated-intro.tsx(1 hunks)
🔇 Additional comments (1)
src/app/about/_components/animated-intro.css (1)
20-20: LGTM! Animation duration reduction improves user experience.Reducing the animation duration from 21s to 12s makes the word slider animation more responsive while maintaining the same smooth transitions. This aligns well with the PR objective of simplifying the animation.
| // useGSAP(() => { | ||
| // // Respect user's motion preferences | ||
| // const prefersReducedMotion = window.matchMedia( | ||
| // "(prefers-reduced-motion: reduce)", | ||
| // ).matches; | ||
| if (prefersReducedMotion) { | ||
| gsap.set(".hero-text h1", { y: 0, opacity: 1 }); | ||
| return; | ||
| } | ||
| gsap.fromTo( | ||
| ".hero-text h1", | ||
| { y: 30, opacity: 0 }, | ||
| { y: 0, opacity: 1, stagger: 0.2, duration: 1, ease: "power2.inOut" }, | ||
| ); | ||
| }, []); | ||
| // if (prefersReducedMotion) { | ||
| // gsap.set(".hero-text h1", { y: 0, opacity: 1 }); | ||
| // return; | ||
| // } | ||
| // gsap.fromTo( | ||
| // ".hero-text h1", | ||
| // { y: 30, opacity: 0 }, | ||
| // { y: 0, opacity: 1, stagger: 0.2, duration: 1, ease: "power2.inOut" }, | ||
| // ); | ||
| // }, []); |
There was a problem hiding this comment.
Important: Accessibility consideration lost with GSAP removal.
The commented GSAP code included important accessibility features that respected the user's prefers-reduced-motion setting. With GSAP disabled, this accessibility consideration is now lost, and the CSS animations will run regardless of user preferences.
Consider implementing a CSS-based solution to respect reduced motion preferences:
+ useEffect(() => {+ const prefersReducedMotion = window.matchMedia(+ "(prefers-reduced-motion: reduce)",+ ).matches;++ if (prefersReducedMotion) {+ const wrappers = document.querySelectorAll('.wrapper');+ wrappers.forEach(wrapper => {+ (wrapper as HTMLElement).style.animationPlayState = 'paused';+ });+ }+ }, []);Alternatively, add CSS media query support in your CSS file:
@media (prefers-reduced-motion: reduce) {
.wrapper {
animation-play-state: paused;
}
}🤖 Prompt for AI Agents
In src/app/about/_components/animated-intro.tsx around lines 8 to 23, the
previously used GSAP animation code that respected the user's
prefers-reduced-motion setting is commented out, causing loss of accessibility
support. To fix this, implement a CSS-based solution that respects reduced
motion preferences by adding a media query for prefers-reduced-motion in the
component's CSS file, which pauses or disables animations for users who prefer
reduced motion. This ensures animations do not run against user settings while
maintaining accessibility.
Summary by CodeRabbit
Style
Refactor
Content Update