Jump to content


React Flip on unmounting and mounting components

Recommended Posts

Hi @OSUblake thank you for your response, I did check this  example already if I understand correctly it applies an enter and exit animation on each box when mount and unmount, tho in my example I'm trying to transition the box from first to final layout state using the data-flip-id, it works well if they're both being rendered at the same time and just apply a display none property on the other one, but how to do it on a conditional rendered component with same data-flip-id? Thank you!

Link to comment
Share on other sites

fade is not going to work unless both elements are in the DOM. You also need to the targets property.



String | Element | Array | NodeList - by default, Flip will use the targets from the state object (first parameter), but you can specify a subset of those as either selector text (".class, #id"), an Element, an Array of Elements, or a NodeList. If any of the targets provided is NOT found in the state object, it will be passed to the onEnter and not included in the flip animation because there's no previous state from which to pull position/size data.


See the Pen OJzRdBj by GreenSock (@GreenSock) on CodePen


  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.