How to reset identity seed after deleting records in SQL Server

Framer Motion + Next.js - Page transition - layoutId and initial prop conflict

Chatto

While developing an image page transitions with Framer motion and Next.js using layoutId, I'm running into an issue.

My basic goal:

Home page shows overview with 3 images Click on image > fade out other images > scale up specific image and go to page with full size image. Click on back link > scale down large image > fade in other images with a small delay.

GIF animation of current proejct

Image size is transitioning well with layoutId, but if I define an opacity transitions using initial, animate and exit on all images (which also have a layoutId), it also applies the opacity values to the layoutId transition. As you can see in the gif my large image also becomes transparent ?

Any ideas? Thanks a lot!

Code on Github: https://github.com/sefrijn/next-page-animate

Deployed on Netlify: https://delicate-monstera-3b89b8.netlify.app/

Image component code:

import { motion } from "framer-motion";

export default function Image({ id }) {
  return (
    <motion.div
      layoutId={`wrapper_image_${id}`}
      transition={{ duration: 0.2 }}
      initial={{ opacity: 0.2 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0.2 }}
      className={"relative w-full h-full"}
    >
      <motion.img
        className={"h-full w-full object-cover"}
        src={`/mountain${id}.jpeg`}
      />
    </motion.div>
  );
}