Events do not update when using namespaces

[ekatzenstein]

I'm adding new elements to my scene with namespaces and the component breaks, nothing logged in the console. Can you see if you can replicate with adding new objects to namespaces?

[ekatzenstein]

When I remove 'events' in the update function, the problem is no longer present

[ekatzenstein]

In summary, events do not carry over when adding new objects to namespaces, and the entire interaction breaks.

[sghall]

Hey there. Could you post some code to look at? Just want to understand better what you're trying to do. Enter, update and leave take a single object or an array of objects. Each object can define an event and a timing key. You can't however, put timing keys inside the namespace'd state items.

So you could do...

  enter={(data, index) => ({
    g: {
      opacity: [0.4],
      transform: [`translate(${scale(data.name) + (scale.bandwidth() / 2)},0)`],
    },
    circle: {
      r: [scale.bandwidth() / 2],
      strokeWidth: [(index + 1) * 2],
      fill: 'green',
    },
    timing: { duration: 1000, ease: easeExpInOut },
    events: { end: () => console.log("this is the end." },
  })}

But not...

  enter={(data, index) => ({
    g: {
      opacity: [0.4],
      transform: [`translate(${scale(data.name) + (scale.bandwidth() / 2)},0)`],
    },
    circle: {
      r: [scale.bandwidth() / 2],
      strokeWidth: [(index + 1) * 2],
      fill: 'green',
      events: { end: () => console.log("this is the end." },  // will not work
    },
    timing: { duration: 1000, ease: easeExpInOut },
  })}

That, to me, would not make sense anyway. All the transition in this object will complete at the same time. If you want independent timing for certain transitions, split it into an array.

enter={(data, index) => ([
  {
    g: {
      transform: [`translate(${scale(data.name) + (scale.bandwidth() / 2)},0)`],
    },
    circle: {
      r: [scale.bandwidth() / 2],
    },
    timing: { duration: 1000, ease: easeExpInOut },
    events: { end: () => console.log("this is the end 1." }, 
  },
  {
    g: {
      opacity: [0.4],
    },
    circle: {
      strokeWidth: [(index + 1) * 2],
      fill: 'green', 
    },
    timing: { duration: 2000, ease: easePolyInOut },
    events: { end: () => console.log("this is the end 2." }, 
  }
]}

[ekatzenstein]

@sghall Thanks, and apologies for the vague issue. let me prep some code and will send your way

[sghall]

Moving this project to react-move. Resonance is now react-move 2.0.