gsap How to animate height from 0px to auto in Tweenmax ?

[Raydoan]

How can I animate height from 0 to auto using the Tweenmax Timeline? I do a lot of research and see some solutions with CSS. But I have already something dynamic with Gsap where I need to animate height from 0px to auto on clicking the item. I didn't find any solution to gsap documentation and any example where I can achieve it.

Here is my code to animate on GSAP. 

import { TimelineMax, Power4, Expo, TweenMax } from 'gsap/all';

  const loginSection = document.querySelector('.login-form');
  const loginForm = document.querySelector('.login-form form');
  const tl = new TimelineMax({ paused: true })

  TweenMax.set(loginSection, { height: 0 })

  tl.addLabel('start')
    .set(loginForm, { opacity: 0, x: 50 })
    .to(loginSection, 0.7, { height: 'auto', ease: Power4.easeOut }, 'start')
    .to(loginForm, 0.7, { opacity: 1, x: 0, ease: Power4.easeOut }, 'start+=0.4')

when I click on the element rather than it expanding it renders immediately without any animation. But when I use px instead of auto it's working. But it's not my goal. Your suggestion or solution appreciated.

[mikel]

Hey @Raydoan,

 

Please use GSAP 3 . This guide will help move from GSAP 1.x/2.x to the all-new (and very exciting) GSAP 3.  

 

Here an example

 

See the Pen vYNjogr by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

[Raydoan]

1 hour ago, mikel said:

Hey @Raydoan,

 

Please use GSAP 3 . This guide will help move from GSAP 1.x/2.x to the all-new (and very exciting) GSAP 3.  

 

Here an example

 

 

 

 

Happy tweening ...

Mikel

Thanks @mikel .This is appriciating.  but right now i am in the situation where i don't much time to move gsap 3.0 in my project. so it will be very helpfull if there is any solution gsap 2+ version? 

[ZachSaucier]

3 hours ago, Raydoan said:

any solution gsap 2+ version? 

Use a .set() and then .from() whatever the current height is. So this should work if the height is initially 0:

.set(loginSection, { height: 'auto' }, 'start')
.from(loginSection, 0.7, { height: 0, ease: Power4.easeOut }, 'start+=0.001')

 

[Raydoan]

25 minutes ago, ZachSaucier said:

Use a .set() and then .from() whatever the current height is. So this should work if the height is initially 0:

.set(loginSection, { height: 'auto' }, 'start')
.from(loginSection, 0.7, { height: 0, ease: Power4.easeOut }, 'start+=0.001')

 

Great !! it works but a little issue which is it's drop the height in px as inline-style. but i have a nested form inside the loginSection which is big . so what i want is that do height as auto style. is that possible?

 

[ZachSaucier]

1 minute ago, Raydoan said:

a little issue which is it's drop the height in px as inline-style. but i have a nested form inside the loginSection which is big . so what i want is that do height as auto style. is that possible?

It's quite unclear to me what you are meaning.

 

Can you please create a minimal demo of the issue? Remove all irrelevant parts please. This thread talks more about how to do so:

 

[Raydoan]

3 minutes ago, ZachSaucier said:

It's quite unclear to me what you are meaning.

 

Can you please create a minimal demo of the issue? Remove all irrelevant parts please. This thread talks more about how to do so:

 

ahh!! i solved the problem man . Thanks