Unable to animate React-Konva Circle using React-Motion

Question

I am using React-Konva to draw shapes in my app. I have drawn a circle inside another circle and grouped them. Now, what I want to do is that on a button click the circles should animate (move horizontally). Here is my related code:

<Layer>
  <Motion style={{a: spring(open ? 400 : x)}}>
    {({a}) => {
      return(
        <div
          style={{
            WebkitTransform: `translate3d(${a}px, 0, 0)`,
            transform: `translate3d(${a}px, 0, 0)`,
          }}
        >
          <Group draggable={true}>
            <CircleComponent
              x={parseInt(x)}
              y={parseInt(y)}
              radius={parseInt(radius)}
              color={color}
              shadowValue={parseInt(shadowValue)}
            />
            <CircleComponent
              x={parseInt(x)}
              y={parseInt(y)}
              radius={parseInt(innerRadius)}
              color={innerColor}
            />
          </Group>
        </div>
      );}
    }
  </Motion>
</Layer>

Right now I am getting this error: 'Cannot read property '_idCounter' of undefined'. And this is because I'm introducing a div container inside Layer tag. But if I remove the div container and apply the transform styling to the Group tag, nothing happens. I have read the docs and the Group class doesn't accept any style props. Is there any workaround?

score 2 · Accepted Answer · answered Oct 02 '17 at 09:15

You can't add div as a child of Layer because layer can have only Konva.Group or Konva.Shape as children (not DOM elements).

Group don't style property, but you can use offsetX and offsetY to achieve our effect. Something like:

<Group draggable={true} offsetX={a}>

Unable to animate React-Konva Circle using React-Motion

1 Answers1