Framer Motion - Different Animations in Mapped elements-CodePudding

I am trying to loop over some data and map them to an animated SVG morph but every component instance has different paths.

Framer motion seems to animate them exactly the same even though there paths are different. Any idea how do I make the animations between elements different instead of all of them matching?

Here's a codesandbox describing the issue. Notice that the repeated Dog blob is running through the exact paths animations, even though paths passed to <animated.path

CodePudding user response：

Inside the Blob component for the motion.path element, perhaps the d: paths should be d: gallery.paths?

Otherwise it seems that the paths to be animated for both Blob would be the original const paths without randomized by randomItem.multiple(), hence the exactly same morphing animations.

Update

For the second issue, it seems that both clipPath share the same id, which is a global value, unlike the scoped key. This resulted in just the first clip path was used, and is solved by giving each of them unique id.

With this fix I can see 2 different morphing animations on my end now, so hopefully this solved all the problems.

        <g>
          <defs>
            <clipPath id={`shape-${gallery.key}`}>
              <LayoutGroup id={gallery.key}>
                <motion.path
                  layoutId={gallery.key}
                  style={{
                    fill: "#9565c8",
                    transform: "translate(200px, 200px)",
                  }}
                  animate={{
                    d: gallery.paths,
                    repeatCount: Infinity,
                    autoReverse: true,
                  }}
                  transition={{
                    repeat: Infinity,
                    ease: "easeInOut",
                    duration: gallery.paths.length,
                    reverse: true,
                    repeatType: "reverse",
                    bounce: true,
                    bounceStiffness: 10,
                  }}
                />
              </LayoutGroup>
            </clipPath>
          </defs>
          <image
            style={{ position: "absolute", top: 100, left: 100 }}
            clipPath={`url(#shape-${gallery.key})`}
            xlinkHref={gallery.image}
          />
        </g>