Using TimelineLite with React and Child Components

[captainchemist 3 Likes (Newbie)]

Hi Everyone,

I'm trying to figure out how to use timelineLite with React properly. I attached a codepen that works but I have read is not best practice. The key thing I need is a parent component that will contain the timeline object as a state and then a series of child components that I iterate over. 

 

I read this blog post that claims that it is important to use the onComplete() call back when I am setting up my timeline entries.  The callback gets triggered within the ChildItem when it appears or disappears. The problem with react is that data flows from the top on down, so I can't for the life of me figure out how I can get the callback up into the parent component so I can register it properly. 

 

Can anyone suggest the best way to handle this particular problem? Are there any other changes I should make to this codepen? I heard that I should be using refs instead of ReactDOM but I haven't been able to figure that out either. Thanks! 

See the Pen zdJbLK by CaptainChemist (@CaptainChemist) on CodePen

[Rodrigo 3,823 Likes (Superhero)]

Hi,

 

The thing is that the `onComplete` callback is being used to mount/unmount the component from the App and the DOM. He's using React Transition Group, which is heavily inspired from Angular's ng-animate (at least the old version of ng-animate when you had to pass a callback to onComplete in order to keep track of things), and honestly my personal opinion is that for a simple mount/unmount toggle He's over-complicating things, because I don't think is absolutely necessary to use the component's lifecycle methods in the animations, react transition group does that for you, but everyone has it's own ways so if it's working for Him, that's great!!.

 

Here are two samples of using GSAP with React and Transition Group. This is a simple component toggle, the component gets animated and when the out animation is complete it's unmounted, when the in animation starts is mounted:

 

https://codesandbox.io/s/yvYE9NNW

 

As you can see the `<Transition>` element is just a high order component that adds some features to the regular component using the `addEndListener` attribute.

 

This sample is a todo list using the same set up. Never mind the code that's commented out, I keep that in case someone needs to use... [sigh] CSS transitions  (sorry for using the forbidden language in the forums :D):

 

https://codesandbox.io/s/7Lp1Q8WBA

 

Hope this helps.

Happy Tweening!!!