Animating a variable height with consistent timing

[chrisk2020]

Hi,

 

I'm trying to achieve a kind of accordion effect, where clicking on a panel reveals associated content. I don't know the height of the content so I'm animating to a max-height.

 

I've noticed that if there is a lot of content then the animation runs more quickly than if there is less. I understand that this is because it is the duration that it takes from 0 to say 20px as opposed to 0 to 20,000px. It all has to happen in 1 second. 

 

My question is - is there a way to keep the velocity of the panels visually consistent?

 

also as these panels may be very tall is there any issue in setting max-height to be a very very high number?

See the Pen JXXjOE by chrisk2020 (@chrisk2020) on CodePen

[OSUblake]

To animate things at a constant velocity, define the speed you want things to move at in pixels/second, lets say 1000. Now you need to convert that speed to your object. So multiply the duration of your tween by the distance your object is going to move over the speed. So if your duration is 1 and the object is going to move 500 pixels, this should give you the correct time for your tween.

var speed = 1000;
var distance = 500;
var duration = 1;
var time = duration * distance / speed;

TweenLite.to(element, time, { height: distance });