React Flip on unmounting and mounting components

[chacrasoftware 2 Likes (Newbie)]

Hi, how can we do Flip animation from an unmounting component to the new mounting component in react

See the Pen LYeZMEB by davidkhierl (@davidkhierl) on CodePen

[OSUblake 18,476 Likes (Superhero)]

Hi chacra, 

 

There's a Flip demo in our Advanced React Guide.

 

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

[chacrasoftware 2 Likes (Newbie)]

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!

[OSUblake 18,476 Likes (Superhero)]

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

 

Quote

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

 

[chacrasoftware 2 Likes (Newbie)]

@OSUblake thank you so much! this clears everything up!