Why animating height from "0px" to "auto" is not affected by duration property?

[DW92]

Hi!

I wonder why my animation based on ScrollTrigger, that animates heigh from 0px to "auto" is not affected by duration.

I am making accordion, that expands on scrollTrigger action, but I can't alter the animation time while the accordion is expanding.

On the other hand, when I use CSS "transition" property, my expanding animation "jumps" instead of smooth execution, but collapse animation (other way) seems to be working just fine.

Can you explain to me why is that? And can I do anything to make this work?

See the Pen NWLOpRY by DW922 (@DW922) on CodePen

[DW92]

Ok let me answer my own question, because I was playing with it after asking it and "eureka" xD

 

It's because I am using "scrub" and scrub controlls animation time. In order to be able to alter duration I need to disable srub, and If I want to "reverse" animation by scrolling up, I need to use

toggleActions: "restart none none reverse"

 

 

[GreenSock]

Nice job, @DW92! 🙌

 

And just for the record, you should never apply CSS transitions to the same elements/properties that you're animating with JS. Those will conflict. GSAP updates the property 60 times per second (ish), but if you have a CSS transition applied, it'll be like "NOPE! Sorry, GSAP, I ain't gonna make that change...instead, I'm gonna drag that out over time". It hurts performance and functionality. 

 

Congrats on solving your own issue. Thanks for posting back with the answer so others can benefit. 

[DW92]

True, I have experienced this conflict myself