Jump to content


Animating elements which dynamically enter and leave the DOM using React

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I am using azazdeaz's great React GSAP library on a project. Thanks for your work azazdeaz!

In my demo, you can see a bubble entering in from the bottom and leaving to the top.


However in the `render` method's `return` you can see that more bubbles are meant to render based on the `state`'s `phase` value.


The state value is incrementing as can be seen in the console log and React Dev Tools.


So I guess the `slideAnim` function isn't updating when the `render`'s contents update.


First solution I thought of was to run the animation again from a `componentDidUpdate`, but then it runs many more times than I want.


As I write this I realise using `ReactCSSTransitionGroup` might be the ideal solution here.


Could there be a neat solution for this situation using the React GSAP library?


See the Pen gmaBRL?editors=0010 by alanbuchanan (@alanbuchanan) on CodePen

Link to comment
Share on other sites

Hello alan0buchanan!


Shameless plug here: I documented some of my pains and discoveries with React and GSAP in this thread. Although I am not using azazdeaz's library, you will see relevant gotcha's and solutions that you can adapt for you case.


The solution to your problem is to use not ReactCSSTransitionGroup but ReactTransitionGroup - I'll refer again to my thread as there's some debate about when, why and shortfalls of it.



See the Pen XpzdNm by dipscom (@dipscom) on CodePen



Happy Tweening!

  • Like 3
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.