Jump to content
Search Community

Tween from top: 0px to bottom: 0px

martis test
Moderator Tag

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.



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

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.
  • Create New...