How to control scale[y]

I want to change the scale[y] of box mesh from 1 to 0.01.
My code is as below.

var scaleYKeyFrame = new THREE.NumberKeyframeTrack('.scale[y]', [0, 1], [1, 0.01]);
var clip = new THREE.AnimationClip('default', 1, [scaleYKeyFrame]);

It works well. But the animation is from (both top and bottom) to center. How to make it from top to bottom?

What you are trying to achieve does not work by animating the scale property. You would have to animate the vertices of the top side of the box. To be more precise decreasing/increasing the y values of the vertices.

Thank you for replies.
In my case, there are five types of the box with different height.
・By using animation, How can I get the y values of the vertices of each box? It seems AnimationClip can only control fixed value.
・But, by achieving in render method, I can loop every box to decrease/increase the y values of the vertices.
Can you give me some advices about By using animation :relieved:

Wait, you can achieve the effect by animating the scale property but you have translate the geometry for this:

https://jsfiddle.net/f2Lommf5/16783/

This will move the origin of the geometry at the bottom of the box. This approach has implications to other logic of your app but it’s actually an easy way to implement your intended visual result.

Thank you for your example!
But, if possible, I hope AnimationClip can deal with this situation in future version:wink:

I want to change the behavior of scale[y] property.
Can you tell me which class should I pay a attention to.
:joy: