Popmotion / popmotion

Simple animation libraries for delightful user interfaces
https://popmotion.io
20k stars 663 forks source link

Trying to add property to the morph example results in an error #776

Closed michelecocuccio closed 4 years ago

michelecocuccio commented 5 years ago

Link to CodePen example (or similar)

https://codesandbox.io/embed/31lzml4nr1 (Original) https://codesandbox.io/s/j1y09pqm3 (Changed, NOT WORKING IN SAFARI)

Device information

In which environment are you reproducing the bug?

Versions

"react": "^16.8.0", "react-pose": "^4.0.8", "flubber": "^0.4.2",

Issue

Hello, I am having a weird issue on Chrome and Safari.

I have tried this https://codesandbox.io/embed/31lzml4nr1 and I copied the exact whole code to my React app and it all works fine on FireFox. But in Chrome/Safari it doesn't work and it throws this error: Unhandled Rejection (TypeError): All shapes must be supplied as arrays of [x, y] points or an SVG path string (https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d).

The only difference from the original codePen that I have made it was to add some more options to the path itself like this

const Icon = posed.path(
  pathIds.reduce((config, id) => {
    config[id] = {
      strokeWidth: 5, // ADDED
      stroke: "#e71f75", // ADDED
      fill: "#ffffff", //ADDED
      d: paths[id],
      transition: morphTransition
    };

    return config;
  }, {})
);

If I remove the additional lines that I have added (the one commented with // ADDED) I don't get the error. The annoying thing is that even with the added configurations it works on CodePen in Chrome but NOT IN Safari. You can test it here: https://codesandbox.io/s/j1y09pqm3

Help please? Maybe I am passing the additional configuration for the path the wrong way?

michelecocuccio commented 5 years ago

Ok, I found a solution for now which is to set the StrokeWidth, stroke colour and fill to the SVG instead of to the path instead. Hope this can help people in the future.