Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
alexpriceco opened this issue Aug 27, 2017 · 1 comment
Closed

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

alexpriceco opened this issue Aug 27, 2017 · 1 comment

Comments

@alexpriceco
Copy link

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>
@alexpriceco
Copy link
Author

...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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant