plus1tv / react-anime

✨ (ノ´ヮ´)ノ*:・゚✧ A super easy animation library for React!
https://codepen.io/collection/nrkjgo/
MIT License
1.55k stars 81 forks source link

Can't do anything with SVG. Errors with `Cannot add property delay, object is not extensible` #75

Closed DigitalKrony closed 4 years ago

DigitalKrony commented 4 years ago

I've been trying, for hours, to read through both the react version docs as well as the base JS docs to try and understand what I might be doing incorrectly.

When I have the below, I get no errors and a really boring animation (as expected) of the object fading in and out. Not what I'm looking for, but, things build so far.

<Anime
  svg={true}
  loop={true}
  easing={'easeOutCubic'}
  round={false}
  duration={2000}
  opacity={[1, 0]}
  direction={'alternate'}
  begin={() => {
    console.log('start');
  }}
  complete={() => {
    console.log('end');
  }}
>
  {theBall}
</Anime>

When I update it to the below, I get errors. ( note the addition of path, which is a path within an SVG and transform, which is also the same path within an SVG, set via context). These additions come from this example

<Anime
  svg={true}
  loop={true}
  easing={'easeOutCubic'}
  round={false}
  duration={2000}
  opacity={[1, 0]}
  direction={'alternate'}
  path={arcPath}
  transform={arcPath}
  begin={() => {
    console.log('start');
  }}
  complete={() => {
    console.log('end');
  }}
>
  {theBall}
</Anime>

Everything works fine up until the point that I add in the last two props. The SVG line is drawn dynamically via 4 component points setting {x,y} points to the context. The SVG picks up those points and draws a Bezier curve from and to points I would expect. However, adding in path and transform, or even transformX and transformY, causes a runtime error of:

TypeError: Cannot add property delay, object is not extensible

(anonymous function) D:/Projects/Experimentation/common/temp/node_modules/animejs/lib/anime.es.js:666

  663 | return propArray.map(function (v, i) {
  664 |   var obj = (is.obj(v) && !is.pth(v)) ? v : {value: v};
  665 |   // Default delay value should only be applied to the first tween
> 666 |   if (is.und(obj.delay)) { obj.delay = !i ? tweenSettings.delay : 0; }
  667 | ^ // Default endDelay value should only be applied to the last tween
  668 |   if (is.und(obj.endDelay)) { obj.endDelay = i === propArray.length - 1 ? tweenSettings.endDelay : 0; }
  669 |   return obj;

Ideas? Help? I haven't found another lib to do what I need this to do so far and would appreciate some aid in resolving this issue.

larswittenberg commented 3 years ago

Ran into the same error.

Is it not possible to animate an element along a path like in anime.js with "Motion Path"? https://animejs.com/documentation/#motionPath