Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
martis

Tween from top: 0px to bottom: 0px

Recommended Posts

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!

Link to comment
Share on other sites

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..

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×