Tween div *height* from bottom?

[martis]

Hey guys,

 

I am trying to "mask" on a div from the bottom up. I would love if there is just a simple way to tween the div's height value from the *bottom* point.

 

I tried doing the transformOrigin on bottom left, but did not have any luck.

I also tried setting the container to overflow:hidden, then shifting all the content above the container, then moving the container up while moving the content down at the same rate. This works, but I don't think its the most efficient solution.

 

Thanks!

[Rodrigo]

Hi,

 

Maybe you could try giving the element an absolute position and then give it a bottom:0 property. Finally you could set the height with a TweenLite.set instance and finally tween it to its normal height.

 

Hope this helps,

Cheers,

Rodrigo.

[Rodrigo]

Hi,

I remembered that someone else had a similar question some time ago, you can check that post and see if it helps:
http://forums.greensock.com/topic/7362-tween-right-to-left-transformorigin-not-working/

The thing is that transform origin only works for transform properties like scale, skew, etc., while width and height are determinated ny the top left corner pc the element.

 

I've created a simple codepen in order to show a simple height growing element and a clip tween revealing the element, you can see it here:

See the Pen Ekxni by rhernando (@rhernando) on CodePen

 

Hope this helps,
Cheers,
Rodrigo.