search

hzdg / gsap-react-plugin

A GSAP plugin for tweening React.js component state.
Other
130 stars 8 forks source link

Nested components? #7

Closed mattfordham closed 9 years ago

mattfordham commented 9 years ago

I'm not sure if this is a feature request or a general usage question... please forgive if this isn't the best place for such a question.

How do you handle animating nested components? My approach with React has been to only update state of the top-level component and to pass down changing parameters as props to nested components. That said, animating something from a parent context feels a little odd. Is this the approach you take, or is there something else I am missing?

Thanks!

lettertwo commented 9 years ago

This is a good question, and something we've been evolving on with our own complicated animations.

We've tried a number of different approaches, with mixed success. There are two that we've had the most success with:

  1. Use ReactTransitionGroup to do high-level orchestration of child component animation playback. This is really only useful for 'intro' and 'outro' types of animations, but we found that a lot of the time, it's enough for what we wanted to do.
  2. For more intricate and complicated animations, the best we've come up with is to not tween state directly, but to instead tween a singular 'time' value, and then interpolate state based on that value. If you allow that time value to be controllable by a parent, then the parent can tween it without having to know specifics about what the child wants to tween.

I'm going to close this, since it's not specifically actionable, but feel free to respond with other ideas or further discussion!

Sorry it took so long to get back to you on it!

mattfordham commented 9 years ago

Those are good thoughts, thanks!

Another one I came up with is tweening between old and new state values, as opposed to tweening state itself. The key seems to be in comparing old and new state values within componentDidUpdate and creating a tween only when they change. For child components, the same could be done with props, as opposed to state (assuming parent's state is being passed in as props).

See the first example here: https://gist.github.com/mattfordham/170ed9519fa7444d9942 (The second example is using this plugin.)

Is that a good/bad idea from your POV? Seems like a decent solution if tweening the state itself isn't appropriate.

lettertwo commented 9 years ago

Hey @mattfordham, yeah, you can definitely just tween the DOM element directly, and a lot of the time, that will probably be just fine.

One downside to touching the DOM directly is that React doesn't expect you to, and if you happen to manipulate the DOM in a way that conflicts with React's virtual DOM model (like adding or removing elements), things go very wrong.

I think a big benefit of going through React is that you don't spread your view state between the DOM and the virtual DOM. Always making changes to view state in React means you don't have to worry about potential pitfalls that can appear when animating the same values (with GSAP or jQuery, etc) that you are also rendering (with React), and it's just easier to reason about, in general.

Overall, i prefer tweening state to direct DOM manipulation, though YMMV in certain situations.