search

google-fabric / velocity-react

React components for Velocity.js
MIT License
2.94k stars 161 forks source link

Difference between VelocityComponent and VelocityTransitionGroup? #103

Closed jeffijoe closed 8 years ago

jeffijoe commented 8 years ago

When should we use one vs the other? A clarification in the readme would be gravy!

fionawhim commented 8 years ago

Use VelocityTransitionGroup when you want the behavior of a React TransitionGroup (animations on elements entering / leaving the DOM). Docs here: https://facebook.github.io/react/docs/animation.html

Use VelocityComponent otherwise.

jeffijoe commented 8 years ago

I guess my question is, for a new animation, why would I want to chose one over the other? Why would I explicitly want the behavior of RTG? If that makes sense?

fionawhim commented 8 years ago

It comes down to if you're animating an element in place, vs. if you need to animate a component as it enters or leaves the DOM. If you check the demos, the three on the left are VelocityComponent whereas the two on the right are VelocityTransitionGroup.

On Thu, Jun 16, 2016 at 10:50 AM, Jeff Hansen notifications@github.com wrote:

I guess my question is, for a new animation, why would I want to chose one over the other?

— You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub https://github.com/twitter-fabric/velocity-react/issues/103#issuecomment-226508756, or mute the thread https://github.com/notifications/unsubscribe/AAP65bKIWGWoXdYZxTYCx7eN7PeNPvPyks5qMWK_gaJpZM4I3XFi .

jeffijoe commented 8 years ago

Ah, okay, thanks! Basically right now I am using CSS transition groups because the keyframes are easy to work with in CSS. What would be the best path for me to come close to that experience with Velocity?

fionawhim commented 8 years ago

If you're having the CSS animations just on elements so that they animate when they appear in the DOM, then probably VelocityTransitionGroup will match the behavior you expect. If you've been dynamically adding animation-specific classes to elements based on some triggering event, then use VelocityComponent.

You can do multi-step animations in Velocity, which you might be used to with keyframes, by using registerEffect and specifying a series of calls. (This is for cases where straightforward tweening between two values is not enough.) Look at Velocity's documentation for RegisterEffect, though velocity-react also has a helper for it that prevents naming collisions.

On Thu, Jun 16, 2016 at 10:58 AM, Jeff Hansen notifications@github.com wrote:

Ah, okay, thanks! Basically right now I am using CSS transition groups because the keyframes are easy to work with in CSS. What would be the best path for me to come close to that experience with Velocity?

— You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub https://github.com/twitter-fabric/velocity-react/issues/103#issuecomment-226511132, or mute the thread https://github.com/notifications/unsubscribe/AAP65TKIK4EPFH502b52p8UtKozTxofWks5qMWR9gaJpZM4I3XFi .