Tween from top: 0px to bottom: 0px

[martis 32 Likes (Newbie)]

Hey guys,

 

I often have unknown sized elements (sometimes larger than my screen size) that I want to tween from butting up against the bottom, to butting up against the top or vice versa. I figured out how to get things from the bot to top, but if you try top to bot, it doesn't work.

 

Please see my codepen for the example.

 

Thanks!

[Andy 2 Likes (Newbie)]

I don't think you can have top and bottom in css. try setting top: auto; for your redBox. Then you'll still have the problem that you're tweening a null 'bottom' value to 0..

[jamiejefferson 1,200 Likes (Superhero)]

It can be a tricky effect to pull off, but here's a method that gets both directions working

 

See the Pen iDoGr by jamiejefferson (@jamiejefferson) on CodePen

 

I think the computedstyle is being used for the tweens, hence it working for the blue box; top and bottom can be used on the same element in CSS, however if the element also has a fixed height then top takes precedence.

[martis 32 Likes (Newbie)]

I found the solution:

See the Pen CqIce by anon (@anon) on CodePen

 

If you want something to go from the top to bottom.... you have to initially set the bottom to 0, and do a from top 0.