Animation callbacks not called on Flipped components

[christiancho]

Hey - thanks for a great library. I'm having an issue having the animation callbacks being called:

    <Flipper
      flipKey={`${lastFetch}-${type}`}
      spring="noWobble"
      handleEnterUpdateDelete={simultaneousAnimations}
      element="ul"
    >
      {extracts.map(extract => (
        <Flipped
          flipId={`${extract.id}-${type}`}
          key={`${extract.id}-${type}`}
          onAppear={() => console.log('appear')}
          onStart={() => console.log('start')}
          onStartImmediate={() => console.log('start immedate')}
          onSpringUpdate={() => console.log('spring update')}
          onComplete={() => console.log('complete')}
          onExit={() => console.log('exit')}
        >
          <Label className={type.toLowerCase()}>
            <aside>{type}</aside>
            <Link to={extract.link}>{extract.name}</Link>
          </Label>
        </Flipped>
      ))}
    </Flipper>

None of those console log statements are being made, but handleEnterUpdateDelete is being called:

const simultaneousAnimations = ({
  hideEnteringElements,
  animateEnteringElements,
  animateExitingElements,
  animateFlippedElements
}) => {
  console.log('animate!');
  hideEnteringElements();
  animateExitingElements();
  animateFlippedElements();
  animateEnteringElements();
};

Just for full context: Label is a styled component that receives all props. I've also verified that the FlipContext.Consumer does get the props correctly:

[aholachek]

Hi, thanks for making this issue. I double checked the handle enter/update/delete example and the basic functionality seems to be working fine (you can see the onAppear and onExit callbacks working in that example) so there's no obvious bug from that side.

Can you confirm that the flipKey is getting updated at the correct time, and that the FLIP transitions themselves are actually happening, the callbacks just aren't working? If it would be possible to put an example into a Codesandbox, that would also be helpful.

[christiancho]

The flipKey is definitely updating correctly, but I don't see any transitions being applied. I can try to put it up on a sandbox, but it's a business application we haven't released yet. The basic logic is this:

1. useEffect and useState handle async requests and setting of state.
2. On successful request, state updates to a new array, with some elements being identical. Usually elements get added to the beginning or the end of the array.
3. Each element in the array has a unique ID that is used for the Flipped flipId.

Edit: Also, passing debug as a prop to Flipper doesn't do anything. Should it be triggering the browser debugger?

[christiancho]

Did a bit more digging: animateFlippedElements is returning undefined. The docs say it should be returning a promise.

[aholachek]

Ah, it does seem like something is wrong then, I will take a look this weekend, thank you for flagging.

[christiancho]

@aholachek Is there a chance that it's a problem with object reference? I recently changed some code to return a new array of newly constructed objects on every fetch. Anyway, thanks for looking into this!

Nevermind - your examples for handleEnterUpdateDelete generate new arrays with each change. This is very curious...

[dimensi]

@aholachek, In my case animation callbacks didn't fire, when inverseFlipId prop setted.

<Flipped
            flipId={createId(item.name, 'button')}
            inverseFlipId={item.name} // if i comment this, onComplete start working.
            scale
            transformOrigin='center'
            onComplete={element => {
              element.classList.add(styles.close)
              console.log(element) // didn't fire
            }}
          >
            <button className={styles.plus}>
              <Icon name='plus' />
            </button>
          </Flipped>

[aholachek]

Edit: Also, passing debug as a prop to Flipper doesn't do anything. Should it be triggering the browser debugger?

No, the debug prop just pauses the animation at the beginning: https://github.com/aholachek/react-flip-toolkit#advanced-props

@christiancho could you just confirm you're using the latest version? (7.0.6)

[christiancho]

@aholachek Good to know about debug.

Yes, I'm on 7.0.6.

[aholachek]

Hi @christiancho, thanks for confirming. I thought I might have some idea of what could be going wrong, but so far I've been unable to reproduce this issue locally. If you could make a minimal codesandbox example for me to look at, that would be extremely helpful.

[raphaelaleixo]

Hey @christiancho , @aholachek : I'm getting this same problem. Either of you were able to find out what was happening? Thanks a lot!