plus1tv / react-anime

✨ (ノ´ヮ´)ノ*:・゚✧ A super easy animation library for React!

Home Page:https://codepen.io/collection/nrkjgo/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Error: Problem parsing points="[object Object]"

alexpriceco opened this issue · comments

Trying to animate the following:

<polygon strokeWidth='1' stroke='currentColor' points='70 24 119.574 60.369 100.145 117.631 50.855 101.631 3.426 54.369' />

...and getting Error: Problem parsing points="[object Object]", a whole bunch of times. Here's the whole component:

<svg width='140' height='140' viewBox='0 0 140 140'>
  <g fill='currentColor' fillOpacity='.15' transform='translate(0 6)'>
    <polygon points='70 0 136.574 48.369 111.145 126.631 28.855 126.631 3.426 48.369' />
    <polygon points='70 18 119.455 53.931 100.565 112.069 39.435 112.069 20.545 53.931' />
    <polygon points='70 34.86 101.727 57.911 89.609 95.209 50.391 95.209 38.273 57.911' />
    <polygon points='70 50.898 84.864 61.697 79.186 79.171 60.814 79.171 55.136 61.697' />
  </g>

  <g fill='none' fillRule='evenodd'>
    <Anime
      points={[
        {
          value: '70 41 118.574 59.369 111.145 132.631 60.855 84.631 20.426 60.369'
        }, {
          value: '70 6 119.574 60.369 100.145 117.631 39.855 117.631 55.426 68.369'
        }, {
          value: '70 57 136.574 54.369 89.145 100.631 28.855 132.631 38.426 64.369'
        }, {
          value: '70 24 119.574 60.369 100.145 117.631 50.855 101.631 3.426 54.369'
        }
      ]}
      easing='easeOutQuad'
      duration={2000}
      loop={false}
    >
      <polygon strokeWidth='1' stroke='currentColor' points='70 24 119.574 60.369 100.145 117.631 50.855 101.631 3.426 54.369' />
    </Anime>
  </g>
</svg>

...aaand I figured it out. The points property needed to be just an array, not an object. In the official animejs docs, that polygon is animated using the Object formatting that I used, rather than just an array. ¯_(ツ)_/¯

Rad project though, thanks for this!