JJulien Posted October 16, 2021 Share Posted October 16, 2021 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 More sharing options...
Али К Posted October 16, 2021 Share Posted October 16, 2021 Hello @JJulien , hope this help you See the Pen 276d9e148fa0a763570eaf298dbc7360 by itsalimanuel (@itsalimanuel) on CodePen 1 Link to comment Share on other sites More sharing options...
akapowl Posted October 16, 2021 Share Posted October 16, 2021 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 3 Link to comment Share on other sites More sharing options...
JJulien Posted October 19, 2021 Author Share Posted October 19, 2021 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 !! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now