FLIP onLeave callback not firing

[oscarsidebo]

Hey!

 

In this React example (sorry, I don't know how to embed codesandbox examples) I can't get the onLeave callback to fire.

onEnter works as intended, but onLeave is not firing even tho, when logged, I see an element in layoutState not accounted for in the elements that I feed to targets.

I hope the example is minimal enough 😬
Thanks in advance!

See the Pen by s (@s) on CodePen

[GreenSock]

That's because none of the targets are leaving

 

You're only feeding in ONE target, and it's entering.

 

Maybe you meant to do this?

// OLD
targets: q(".animationScope"),
  
// NEW
targets: q(".animationScope").concat(layoutState.targets)

I'm not entirely clear on your intent, but keep in mind that by default Flip will use the targets defined in the state object, but if you explicitly define a targets value, it'll only handle those of course. So when it tries to find the corresponding state information in the state object that you feed in, that's what determines entering/leaving - if it can't find a matching visible one (with the same data-flip-id) in the state object, that element is considered "entering". If one of the targets isn't visible now, it'll be considered "leaving". 

 

Does that clear things up? 

[oscarsidebo]

Thanks for a quick reply!

targets: q(".animationScope").concat(layoutState.targets) does not seem to fix my issue.. 😞

I guess I'm assuming Flip uses getState and diffs it against targets to understand if a target is new or has disappeared. So that's what I'm console.logging, and as far as I can see, the element that was found in the getState-array is not in the targets-array, but still onLeave is not firing. 

Btw, I updated the example with your suggestion.

[Rodrigo]

Hi,

 

As long as I can see the onLeave callback is firing (you can create a console call in it and it'll show). I believe the issue could lie here:

<Canvas className="canvas-wrap">
  {navigator !== "red" && navigator === "home" && (
   <RedSmallBg
   // show={navigator === "home"}
   data-flip-id="redbg"
   className="animationScope"
   onClick={() => navigateTo("red")}
   />
)}
{navigator !== "blue" && navigator === "home" && (
  <>
  <BlueSmallBg
  // show={navigator === "home"}
  data-flip-id="bluebg"
  className="animationScope"
  onClick={() => navigateTo("blue")}
/>
</>
)}
  </Canvas>

Basically this conditional rendering logic removes both elements as soon as the navigator property changes. Then you have this in your navigateTo method:

function navigateTo(navState) {
  let state = Flip.getState(q(".animationScope"), {
    simple: true,
    props: "fontSize,opacity"
  });
  setNavigator(navState);
  setLayoutState(state);
}

So the navigator state is updated first, that triggers a re-render which will involve the conditional rendering above. Then the layout state is updated which triggers the Flip animation in the layout effect hook. By that time the elements inside the Canvas wrapper are no longer rendered. What you should do is trigger the Flip animation and when it's completed update the state to handle the conditional rendering of the elements. Which means that you might need to change the nav state when the animation is done when both elements are visible and update the nav state when the animation starts when they are hidden.

 

Finally keep in mind that Flip's from method returns a GSAP Timeline instance so you can add a regular onStart and onComplete callback in it to toggle the particular piece of state that you need to update:

https://greensock.com/docs/v3/Plugins/Flip/static.from()

 

Hopefully this clears things up. Let us know if you have more questions.

 

Happy Tweening!