Animate components seem to be dependent on each other

[thebne]

Problem or feature description

When animating orthogonal objects with <Animate />, I experienced something that looks like a dependency between the objects.

Here's a short animation of the bug - the easing function works completely differently when there's only one object at a time. Notice the short lag in the ease-out phase right when the new element slides in

Steps to reproduce (only needed for problems)

Please note: the key prop does change between iterations and the created elements are distinct. rendering the group:

  // for every animation in the list, create the animation element
  return <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" style={{
      width: '100%',
      height: '100%',
    }}><g transform="translate(50, 50)">
    {animations.map(a =>
        <ChordAnimation key={a.time} {...a} />
      )}
  </g></svg>

the element itself:

function ChordAnimation({chord, active}) {
  return (
    <Animate
      show={active}
      start={{
        circle: {
          fill: 'white',
        },
        g: {
                                transform: 'translate(0, 120)',
          opacity: 0,
        },
      }}
      enter={{
        circle: {
          fill: ['red'],
        },
        g: {
          transform: ['translate(0,-25)'],
          opacity: [1],
        },
        timing: { duration: 300, ease: easeCubicInOut },
      }}
      leave={{
        circle: {
          fill: ['blue'],
        },
        g: {
          opacity: [0],
          transform: ['translate(0, -50)'],
        },
        timing: { duration: 1000, ease: easeCubicInOut },
      }}
                        update={{
        g: {
          opacity: [1],
          transform: ['translate(0,-25)'],
        },
        timing: { duration: 100, ease: easeCubicInOut },
                        }}
                        interpolation={(begValue, endValue, attr) => {
                                if (attr === 'transform') {
                                        return interpolateTransformSvg(begValue, endValue)
                                }

                                return interpolate(begValue, endValue)
                        }}
    >
      {(state) => <g {...state.g}>
                                <circle stroke="grey" r="5" {...state.circle} />
                                <text fill="black" font-size="3">{chord}</text>
                        </g>}
    </Animate>

Versions (only needed for problems)

• React-Move: 6.1.0
• React: 16.13.0
• Browser: Chrome 80.0.3987.149

[thebne]

Update: same thing happens when I use a <NodeGroup /> to render all of them Update 2: It doesn't happen when I use a different easing function (didn't happen with sin and linear easing)

[sghall]

Cleaning up these issues. I've never seen anything that looks like what you're describing and it's hard to imagine how it would happen just given how the animation work. If this is still a concern, re-open this issue and provide a code sandbox that demonstrates the issue and I'll take a look.