[react-pose] SVG Path Update Fails

[amcdnl]

Bug

When animating a path of an SVG, once the path is set on enter and the data changes later, it fails. If needed, I can make a demo of this too.

Error

hey-listen.es.js:12 Uncaught (in promise) Error: HEY, LISTEN! Values 'M0,139.55556L171,174.44444L385,0L513,139.55556' and 'M0,139.55555555555554L125,174.44444444444446L280,0L374,139.55555555555554L451,261.6666666666667L482,104.66666666666669L513,209.33333333333334' are of different format, or a value might have changed value type.
    at invariant (hey-listen.es.js:12)
    at createComplexAction (popmotion.es.js:514)
    at vectorAction (popmotion.es.js:527)
    at popmotion.es.js:673
    at Action.start (popmotion.es.js:118)
    at startAction (popmotion-pose.es.js:328)
    at pose-core.es.js:158
    at new Promise (<anonymous>)
    at pose-core.es.js:146
    at Array.map (<anonymous>)

Code

export const PosedLine = posed.path({
  enter: {
    d: ({ enterProps }) => enterProps.d,
    delay: ({ index }) => index * 10,
    transition
  },
  exit: {
    d: ({ exitProps }) => exitProps.d
  }
});

then in the JSX -

<PosedLine
          pose="enter"
          poseKey={enterProps.d}
          pointerEvents="none"
          stroke={stroke}
          fill="none"
          enterProps={enterProps}
          exitProps={exitProps}
          index={index}
        />

[Andarist]

A demo would certainly help in debugging this quicker.

[amcdnl]

Its also worth noting if I fallback to d3-interpolate it works.

import posed from 'react-pose';
import { tween } from 'popmotion';
import { interpolate } from 'd3-interpolate';

const pathTransition = ({ from, to }) =>
  tween({
    from: 0,
    to: 1
  }).pipe(interpolate(from, to));

export const transition = {
  d: pathTransition,
  default: {
    type: 'spring',
    velocity: 10,
    damping: 100
  }
};

[mattgperry]

I think d3 might be a bit more intelligent about understanding and subdividing the paths. There’s different points in the two Paths provided there, the non-numerical/colour parts need to be exactly the same for this to work

…

On Mon, 26 Nov 2018 at 20:42, Austin ***@***.***> wrote: Its also worth noting if I fallback to d3-interpolate it works. import posed from 'react-pose'; import { tween } from 'popmotion'; import { interpolate } from 'd3-interpolate'; const pathTransition = ({ from, to }) => tween({ from: 0, to: 1 }).pipe(interpolate(from, to)); export const transition = { d: pathTransition, default: { type: 'spring', velocity: 10, damping: 100 } }; — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#645 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AHfLKvmR6sSthEt7iwxbB4RnLdkDZpA9ks5uzFIkgaJpZM4YzsoJ> .

[amcdnl]

I can handle that way - might be worth noting in the docs. If thats the case, we can close this.

On that note - This failed for me when i tried to implement this - #646.

[amcdnl]

@InventingWithMonster - Would you like me to close this given your feedback or keep it open for reference?