Trying to animate the appearance and disappearance of a React component with Flip

[Romanus 3 Likes (Newbie)]

Hello! I'm trying to get a React component to fade in and out smoothly. I don't understand what to do next. Help me please

See the Pen PoeEXoM by romanusss (@romanusss) on CodePen

[Rodrigo 5,082 Likes (Superhero)]

Hi @Romanus,

 

If you just want to fade in/out a single element, perhaps the Flip Plugin is not the best tool for this particular case. Just create a regular animation and unmount the component when the fade out animation is complete and mount the component before the fade in animation starts:

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

 

The Flip plugin might be more suited to a situation like this:

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

 

Let us know if you have any other questions regarding this.

 

Happy Tweening!

[Romanus 3 Likes (Newbie)]

Thank you!) Good advice. But I got a strange problem when I tried to replicate this code in my application.
I get an error - Uncaught TypeError: gsap__WEBPACK_IMPORTED_MODULE_14__.default.context is not a function
I do everything exactly the same as in your example. I will try to fix it or repeat it on codepen.
But for several hours I can not understand what's wrong. Can you guess why this is?)

[GreenSock 18,257 Likes (Superhero)]

gsap.context() was introduced in 3.11.0, so I bet you just have an old version. Update to 3.11.2 and see how that goes. You may need to clear your cache (including NPM).