Skip to content

Commit

Permalink
Merge pull request #425 from CoderFleet/feat/slide-icon-hover-improve…
Browse files Browse the repository at this point in the history
…ment

Feat/ Add Slide Animation to Carousel Navigation Buttons Using Framer Motion 🚀 (Fixes #415)
RamakrushnaBiswal authored Oct 29, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
2 parents 7ee2227 + 8fe39a4 commit a4201c4
Showing 1 changed file with 25 additions and 3 deletions.
28 changes: 25 additions & 3 deletions frontend/src/components/ui/ReviewCarousel.jsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React, { useEffect, useState } from 'react';
import { useEffect, useState } from 'react';
import { motion } from 'framer-motion';

const ReviewCarousel = () => {
const [active, setActive] = useState(3);
@@ -148,8 +149,29 @@ const ReviewCarousel = () => {

))}

<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))}>{">>"}</button>
<button id="prev" className=' absolute top-[40%] text-green-900 bg-none border-none text-6xl font-mono font-bold opacity-80 transition-opacity z-10 left-[50px] max-sm:text-white max-sm:text-2xl max-sm:left-2' onClick={() => setActive(prev => (prev - 1 >= 0 ? prev - 1 : prev))}> {"<<"}</button>
{// 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
}
<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 }}
>
{'>>'}
</motion.button>
<motion.button
id="prev"
className=" absolute top-[40%] text-green-900 bg-none border-none text-6xl font-mono font-bold opacity-80 transition-opacity z-10 left-[50px] max-sm:text-white max-sm:text-2xl max-sm:left-2"
onClick={() => setActive((prev) => (prev - 1 >= 0 ? prev - 1 : prev))}
whileHover={{ x: -10, color: '#00B2CA', opacity: 1 }}
>
{' '}
{'<<'}
</motion.button>
</div>
</div>
);

0 comments on commit a4201c4

Please sign in to comment.