Jump to content

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

Animate to height auto

Recommended Posts

Hello ! I'm a very newbie in GSAP world and I'd like to animate an expandable menu to height auto. I couldn't make it work with a .from() so is there a way to do it with .to() or am I a doing something terribly wrong for that it doesn't work with a from ? 


Thanks a lot 🙏

See the Pen porgEzw?editors=0110 by kombolo (@kombolo) on CodePen

Link to comment
Share on other sites

Welcome to the forums @JJulien


It seems to work quite alright if you insert "auto" for the height-property to tween to.


I would probably stick with the .to() route here, as .from() will tween .from() the values you feed the tween with [ to the values you initially set there via CSS ] and for one you would probably have to use .to()-tweens anyway at some point and working with.from() tweens can become a bit puzzling in a scenario as such (well, at least for me it does).


Some other notes:

  • I would wrap the whole thing up in a load-event function to make sure your images are actually loaded when you set things up and the height of the images can be respected correctly.
  • I also changed the height in the CSS on your #expanded-menu to 0 instead of 0% - because those 0% actually didn't do anything

Hope that'll help a bit.


See the Pen 5bdefaf964844e6a7bd3ba12d6d2ac95 by akapowl (@akapowl) on CodePen

  • Like 3
Link to comment
Share on other sites

Woow thanks a lot for your reply. I thought i used auto in the .to() but maybe not I tried percentage instead. Thanks that's very useful !!

  • Like 1
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.