Jump to content
GreenSock

martis

Tween from top: 0px to bottom: 0px

Go to solution Solved by martis,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

  • Solution

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