Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
captainchemist

Using TimelineLite with React and Child Components

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

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

Link to comment
Share on other sites

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 :blink: (sorry for using the forbidden language in the forums :D):

 

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

 

Hope this helps.

Happy Tweening!!!

  • Like 5
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.
×