Recommended approach for animating presence of DOM elements

[Roman Kopo]

Hi,
I'm working with React and think of something like <AnimatePresence/> which is available in (Framer) Motion. The goal is to remove or add an element from the DOM with an animation. What's the recommended way to achieve this? Is there something available like the AnimatePresence component in Framer?

[Rodrigo]

Hi @Roman Kopo and welcome to the GSAP Forums!

 

At the moment there isn't something like that, the approach I could suggest is a conditional rendering using the onComplete when removing an element. When adding an element you can use add the element with an opacity: 0 and then apply the other transforms you want/need.

 

Another option could be to borrow some logic from this demo:

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

 

Hopefully this helps

Happy Tweening!

[Roman Kopo]

thanks @Rodrigo for your suggestion of the preferred implementation and the example!