Animating div height from bottom of container to the top instead of top to bottom

May 16, 2014, 6:28 pm
Author: James Griffiths

We came across some interesting behaviour while building a charting application with HTML, CSS and jQuery. When it came to animating the individual bars of the charts that we were generating the height would always grow downwards! As bizarre as this behaviour seemed fixing it proved to be relatively straightforward.

Firstly, we needed to ensure that the parent container for the div element to be animated was set with a rule of position:relative.

Then we declared a CSS rule of position:absolute and bottom:0 on the div element to be animated.

As the div element is now positioned absolutely from the bottom of the container it has nowhere to vertically increase but upwards.

When we ran the animations, after making these changes, the heights of the bars in our dynamically generated charts were vertically increasing upwards and not downwards - exactly the behaviour we wanted to see!

Categories

« Return to Posts

Post a comment

All comments are welcome and the rules are simple - be nice and do NOT engage in trolling, spamming, abusiveness or illegal behaviour. If you fail to observe these rules you will be permanently banned from being able to comment.