How to animate using <Play> ?

[Abhimanyu-Jha]

Hi there!
I am trying to use Play to animate certain elements in my code like

• animating the camera position
• animating a shpere surface's rangeX or rangeY
• animating a surface's expr attribute
• (etc.)

In the vanilla JS implementation (using mathbox.js) I was able to pull these things off by using view.play({...}) which successfully animated the target specified as "#targetID".

In the react implementation however, when i try to do this, I get errors like
Error: <area#sphere-data /> - Can't set computed property x.span.range={0,6.283185307179586}

Any ideas why this is happening?

[ChristopherChudzicki]

@Abhimanyu-Jha I have not used <Play />, or any of the "present" nodes much. (For my use cases, I've mostly wanted to animate things via user interaction, so the animation related code is in React.) But should work, and if it doesn't, that's a problem!

Since I haven't used it much, my first step was to port Mathbox's play example to Mathbox React. This seems to be working correctly.

Do you have a code sample you can share? Either your app, or something minimal. Re something minimal...It might be easy to make a PR here with a storybook—you could probably edit #234.

[sritchie]

I actually am seeing the same issue with an animation I was running. I'll get a repro up!

[sritchie]

Actually, it is happening in the story that you added (http://localhost:6006/?path=/story/play--default-cartesian):

The animation DOES seem to work, same with what I was seeing. This is where the error is coming from:

https://github.com/unconed/mathbox/blob/master/src/model/attributes.js#L194-L199

it's strange since I can't see how range and friends would get into a bind call and become computed.

[ChristopherChudzicki]

@sritchie @Abhimanyu-Jha Yes, you are both correct—there is a bug here. mathbox-react. Currently it is setting properties an extra time. The current react component is causing something like

const line = mathbox.line({ color: 'blue' }) // 1. create the line
line.play({ script: [ { color: "red" }] })  // 2. animate the color
line.set({ color: "blue" }) // 3. react re-renders and sets color to blue

to happen, and mathbox (reasonably) errors on step 3, since it doesn't want you to override the color prop which is now "computed".

I will look into ways to address this.