Introducing React Metro

About two weeks ago I found myself needing to animate a sequence of React components as they mount / unmount, and since I couldn’t google up a lib that did just that, I decided to make one myself, for funsies.

The idea behind Metro is simply to combine the power of TransitionGroup(Plus) and GSAP TweenMax, and provide a set of helper methods to enhance everyday data.

Use case

A set of components should animate away when interacted with, accentuating the one that got selected in some way. Then, when the animation finishes, dispatch something and go on to a new page.

Metro.sequence

Since animations are most often considered as ‘nice to have’, chances are you already have working components mapped with all the necessary data, like emojis. Therefore I knew that I wanted something that wouldn’t force me to rewrite my presentational components = Metro.sequence:

The gist is to check whether the sequence should be shown or not, then build a sequence by providing your data and mapping your presentational component through the Metro.animation HOC.

This is enough to animate your components as they mount / unmount, uses a default preset & they access their data through this.props.emoji

Using animationMaps

The real power of Metro lives between your data and the map:

The animationMap gives the developer total control of how each item in a sequence should be animated. When provided, Metro spreads your map on top of the default preset (which can also be overridden). What you do with your map is totally up to you. You just have to make sure to provide a map with a length that equals your data.

Metro.generateFocusMap

Even though the developer has total control of an animation through the use of custom animationMaps, I created a helper method called Metro.generateFocusMap for cases where you want to accentuate a specific item within your sequence without having to invest time and effort in writing a custom animationMap.

Today there’s only a couple of presets (all domino based) but the plan is to build a small library with all kinds of variations. Hopefully with the kind help of our generous community this will be a breeze! 💨💨

defaultAnimationOverride

As mentioned earlier you can override the default animation, this by passing Metro.sequence an animation object as the last argument. Remember that this setting will affect all your items equally, no matter how many items your sequence may contain:

Methods

There are four of them and they are all optional, one for setting the element type, one for handling clicks and two for binding to sequence mount / unmount complete events:

Hooking up to local state

A detail article coming soon, for now this will get you started:

Nicolás Delfino