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.
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.
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
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.
Provide a one item animationMap to a three item array you’ll only override the… hold on… yeah the first item.