React animate height (slide up/down) component

Most JavaScript developers used jQuery's .slideUp() and .slideDown() methods, and got used to them. As component based frameworks usually do not include such functionality, the first logic choice is to turn to CSS. But alas, CSS transitions do not work with height: auto. (Transitions can do a tween only between two numeric values.)

As we use this a lot in our company, I tried to find React component that does it. Found a couple, didn't like them, as most of them rely on a tone of dependencies. Again, I decided to write my own - small, fast and with no dependencies.


You can see it live here. Same page has the documentation and links to the npm and GitHub.

Component can animate from (and to) 0 (collapsed), auto (expanded), and to any specific value in pixels.


Install it from npm

npm install --save react-animate-height

import it in your React project, and wrap the content you want to animate in it.

import AnimateHeight from 'react-animate-height';

  duration={ 500 }
  height={ 'auto' }
  <h1>Your content goes here</h1>
  <p>Put as many React or HTML components here.</p>

For more detailed documentation and all props explained, check the GitHub repo,

How it works

Component is using CSS transitions, but with a small trick to make it work. We mentioned that transitions only work between two numeric values. We'll replace auto with numeric value just before transition happens.

There are three possible cases:

  • Specific height to the other specific height

    This is the easiest one. Element will have overflow: hidden and translate from one height value to the other. Piece of cake.

  • Specific height (0 included) to auto

    This one is a bit more interesting. As we can't transition to auto, component will take the content height, apply it to the element, and transition will happen. But important thing is that after the transition is complete, component will reset height to auto and overflow to visible

    This is important if you add more content to the component, it will natively grow. As well for the potential absolute elements that you want to go outside of the container. Note that when specific height is applied element will always have overflow: hidden.

  • Auto to specific height (0 included) Similar to the previous case but reversed. Component will grab the expanded height and apply it to the element. Then with a timeout of 0, apply specific height. (Check this if you are confused about the timeout of 0.) Again, transition will work as it goes between two numeric values.


I guess everyone took slide up/down for granted, but in the end there is a little logic that needs to be put in to make it work properly. On the other hand some people are solving it by pilling up the 3rd party code. Please, when you are open sourcing a library, keep it small and simple!

Hope you'll use it!

Comments (4)

Luna Goodnight
07. Sep 2018, 14:03

Hi, thanks to your great work. But I wonder why I can't install it?

07. Sep 2018, 14:10

Hello Luna,

Make sure your node version is up to date and follow quick start section in the documentation.


Ayden King
02. Oct 2019, 18:09

Hello, know this is old but I was wondering - is it possible to animate without having any fixed heights? Both sizes I need to alternate between are height: auto.

Thanks for your work on this project

02. Oct 2019, 20:22

Hey Ayden, I hacked an example of how you can do it using AnimateHeight. It is a little bit tricky, but it works. (Make sure you reset fixed height on window resize.)

EDIT: Check this proof of concept I did some time ago. It animates height and opacity between two React components.