Fix: Infinite Marquee Animation with Hover Pause #831
Conversation
|
|
📝 WalkthroughWalkthroughThis change enhances the TechMarquee component by adding interactive hover controls and dynamic animation management. The marquee now starts and stops animation based on hover state, expands the number of displayed items from 3 to 6, and applies performance optimizations through CSS utilities. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Suggested labels
Suggested reviewers
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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. Comment |
|
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
landing-page/src/Pages/Demo/marqu.tsx (3)
28-42: Animation speed inconsistency after resume.When the animation resumes after hover,
controls.start()animates from the current position to-50%with a fixed 10-second duration. This causes inconsistent speed depending on where the animation was stopped—stopping at-40%results in a very slow crawl for the remaining 10%, while stopping at-10%makes it faster.For a smoother experience, consider calculating the remaining duration proportionally:
🔎 Suggested improvement
useEffect(() => { if (!isHovered) { + // For truly seamless resume, you could track position and calculate remaining time controls.start({ x: '-50%', transition: { duration: 10, ease: "linear", repeat: Infinity, repeatType: "loop" } }); } else { controls.stop(); } }, [isHovered, controls]);Alternatively, a simpler approach is to reset to initial position before resuming:
} else { controls.stop(); controls.set({ x: '0%' }); // Reset position on hover }
60-60: Consider a cleaner approach for array duplication.The repeated spread syntax is verbose. A helper function or
Array.fromwould be more maintainable if the duplication count needs to change.🔎 Suggested improvement
- {[...technologies, ...technologies, ...technologies, ...technologies, ...technologies, ...technologies].map((tech, index) => ( + {Array.from({ length: 6 }, () => technologies).flat().map((tech, index) => (Or define a constant for clarity:
const DUPLICATE_COUNT = 6; const marqueeItems = Array.from({ length: DUPLICATE_COUNT }, () => technologies).flat();
28-42: Consider respectingprefers-reduced-motionfor accessibility.Users with vestibular disorders or motion sensitivity may find continuous marquee animations uncomfortable. Adding support for the
prefers-reduced-motionpreference would improve accessibility.🔎 Suggested implementation
import { useReducedMotion } from 'framer-motion'; export default function TechMarquee() { const [isHovered, setIsHovered] = useState(false); const controls = useAnimation(); const prefersReducedMotion = useReducedMotion(); useEffect(() => { if (prefersReducedMotion) { controls.stop(); return; } if (!isHovered) { controls.start({ x: '-50%', transition: { duration: 10, ease: "linear", repeat: Infinity, repeatType: "loop" } }); } else { controls.stop(); } }, [isHovered, controls, prefersReducedMotion]); // ... }
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
landing-page/src/Pages/Demo/marqu.tsx
🔇 Additional comments (2)
landing-page/src/Pages/Demo/marqu.tsx (2)
2-8: LGTM!The imports and state initialization are appropriate. Using
useAnimationfor programmatic control and tracking hover state is the right approach for implementing pause-on-hover functionality.
44-59: LGTM!Good implementation choices:
overflow-hiddencorrectly clips the marquee contentwill-change-transformoptimizes GPU rendering for the animationz-10appropriately addresses the button visibility issue- Hover handlers are properly bound to the container
|
wow bro perfect good work |
|
Thanks man ,Hope it gets merged |
2 participants
Closes: #828
Fix: Infinite Marquee Animation with Hover Pause
What I Fixed
The marquee animation wasn't truly infinite
it would finish and reset, creating a bad user experience. Background dots were overlapping the buttons, and the animation didn't pause on hover, making it difficult to interact with the buttons and read the text mentioned on the buttons.
Changes Made
Infinite Scrolling:
useAnimationhook for better programmatic control-100%to-50%to properly align with the 6 duplicate setsHover Pause:
useStateuseEffectto start/stop animation based on hover stateButton Visibility:
How It Works
The infinite loop works by rendering 6 duplicate sets of cards. The animation moves the container by 50% (which moves past 3 sets), and when it loops back, the next 3 sets are perfectly aligned, creating a seamless infinite scroll effect.
Attaching a video for reference:
marquee.fixes.mp4
Summary by CodeRabbit
Release Notes
New Features
Style
✏️ Tip: You can customize this high-level summary in your review settings.