Jump to content


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

Recommended Posts

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

Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

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?)

Link to comment
Share on other sites

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). 

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.