0.2.2 • Public • Published


With this library, you can easily create Hero animations in your React apps. A demo is available here.


The HeroAnimationProvider needs to wrap all components. It tracks the registered heroes and which one to animate.

Also, every animatable element (the heroes) need to be wrapped with a Hero component.

import { HeroAnimationProvider, Hero } from 'react-hero-animation'
  <Hero id='hero-1' show={true}>
    <YourChildComponent />
  <Hero id='hero-1' show={false}>
    <YourChildComponent />    

Hero properties

Name Type Default Description
children* element One child element, must be either a dom element or a React.Component instance (it gets a ref, so pure functional components are not supported).
id* string A unique ID of this hero. Every hero with the same ID is treated as one animatable element and only one of it can be visible at once.
resize bool false If true, the wrapped component will be resized (using width and height) instead of scaled.
show bool false Displays the wrapped component, using a hero animation. Only one Hero can be displayed at a time.


The files included in this repository are licensed under the MIT license.

Related projects

There is another project, Pajn/react-hero-transition, that provides almost the same functionality (except for resize) and might be more flexible. It was published four days before this library, we just found it when we were about to publish this one.

Package Sidebar


npm i react-hero-animation

Weekly Downloads






Last publish


  • evidence
  • lemaik
  • redbeard0091
  • saschb2b