Feat/ Add Slide Animation to Carousel Navigation Buttons Using Framer Motion 🚀 (Fixes #415) #425
Conversation
|
@CoderFleet is attempting to deploy a commit to the bunty's projects Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThe pull request modifies the Changes
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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 (
|
|
Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. In the meantime, please ensure that your changes align with our CONTRIBUTING.md. If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊 |
![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
🧹 Outside diff range and nitpick comments (2)
frontend/src/components/ui/ReviewCarousel.jsx (2)
152-155: Simplify the explanatory comments.The comments could be more concise while maintaining clarity.
- {// Changed Buttons to motion.button provided by framer - // whileHover is a framer specific attribute - // It displaces buttons by 10px on hover for that nice slide animation - } + {/* Navigation buttons with Framer Motion hover animations */}
156-165: LGTM! Well-implemented animation with some potential refinements.The motion buttons successfully implement the slide animation requirements with good accessibility and mobile responsiveness.
Consider these optional refinements to enhance the animation further:
<motion.button id="next" className=" absolute top-[40%] text-green-900 bg-none border-none text-6xl font-mono font-bold opacity-80 transition-opacity z-10 right-[50px] max-sm:text-white max-sm:text-2xl max-sm:right-2" onClick={() => setActive((prev) => (prev + 1 < items.length ? prev + 1 : prev)) } - whileHover={{ x: 10, color: '#00B2CA', opacity: 1 }} + whileHover={{ + x: 10, + color: '#00B2CA', + opacity: 1 + }} + transition={{ + type: "spring", + stiffness: 300, + damping: 20 + }} >The spring animation will make the slide effect feel more natural and engaging. Apply similar changes to the prev button for consistency.
Also applies to: 166-174
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
- frontend/src/components/ui/ReviewCarousel.jsx (2 hunks)
🔇 Additional comments (1)
frontend/src/components/ui/ReviewCarousel.jsx (1)
1-2: LGTM! Clean import declarations.The import statements are well-structured, using named imports from React and importing only the required motion component from framer-motion.
RamakrushnaBiswal
merged commit a4201c4
into
RamakrushnaBiswal:main
RamakrushnaBiswal
added
bug
Summary
This PR Fixes #415
This PR enhances the
ReviewCarouselcomponent by introducing a slide animation effect to thenextandprevnavigation buttons using Framer Motion. This update aims to improve user experience by adding a visually engaging animation, making the navigation smoother and more interactive.Changes
Slide Animation on Hover:
nextandprevbuttons tomotion.buttonwith Framer Motion.nextbutton slides 10px right.prevbutton slides 10px left.Style Adjustments:
Screenshots / Videos
Final Result
screen-capture.webm
Thank you! 🙌
Summary by CodeRabbit
New Features
Bug Fixes