Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Add Link attribute to framer-motion carousel animation

I have a carousel made with framer-motion. The carousel works just fine, but I also want to add a link to each item in the carousel and when I try to do that the CSS breaks and the carousel moves from the center to the right.

const imageVariants = {
    center: { x: "0%", scale: 1, zIndex: 5 },
    left1: { x: "-40%", scale: 0.7, zIndex: 4 },
    left2: { x: "-80%", scale: 0.5, zIndex: 3 },
    left3: { x: "-100%", scale: 0.3, zIndex: 2 },
    right3: { x: "100%", scale: 0.3, zIndex: 1 },
    right2: { x: "80%", scale: 0.5, zIndex: 3 },
    right1: { x: "40%", scale: 0.7, zIndex: 4 },
};

{images.map((image, index) => (
    <Link to={"/section/${index}"} key={index}>
    <motion.img
        key={index}
        src={image}
        alt={image}
        className="rounded-[12px] w-[200px] h-[300px] object-cover"
        initial="center"
        animate={positions[positionIndexes[index]]}
        variants={imageVariants}
        transition={{ duration: 0.5 }}
        style={{ width: "40%", position: "absolute" }}
    />
    </Link>
))}

Without the Link attribute the code works fine.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0 
    {images.map((image, index) => (
     <motion.div key={index}
                 alt={image}
                 initial="center"
                 className="rounded-[12px] w-fit h-[300px] object-cover"
                 animate={positions[positionIndexes[index]]}
                 variants={imageVariants}
                 transition={{duration: 0.5}}
                 style={{position: "absolute"}}>
         <Link to={`/section/${index}`}>
         <img src={image}  className="rounded-[12px] w-[500px] h-[300px] object-cover"/>
         </Link>
     </motion.div>
))}

  2. 0 
    {images.map((image, index) => (
    <Link 
        to={"/section/${index}"} 
        key={index} 
        style={{ display: 'block', width: '200px', height: '300px' }}
    >
        <motion.img
            key={index}
            src={image}
            alt={image}
            className="rounded-[12px] w-[200px] h-[300px] object-cover"
            initial="center"
            animate={positions[positionIndexes[index]]}
            variants={imageVariants}
            transition={{ duration: 0.5 }}
            style={{ width: "40%", position: "absolute" }}
        />
    </Link>
))}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search