ethansisson

That's an elegant solution, Blake. Thank you. I love that, as you said, it's like it never happened. Sometimes using GSAP feels like playing with magic. So far this technique has worked for me without the pause and delay. Have you found that those are specifically needed for some scenarios?

That's a good question. One reason is that if we calculate the width like you propose, the percentage is hardcoded. So if the value changes in the CSS it has to be updated in JS. We try to avoid that kind of dependency because it's difficult to document well and makes maintenance problematic. There are other issues related to modularization of our UI that make that approach undesirable, though those issues are, of course, difficult to justify here without much greater familiarity with our codebase on your part than this conversation is probably worth.

If I create a className tween... TweenMax.to(element, 1, {className: '+=expanded'}); ...and the new class changes the width of the element, the width will be tweened. Is there a way to get the ending value of the width tween before the tween is complete? For example, the tweened element's original style sets its width to 300px, but the 'expanded' class changes the width to 50%. The element's container is 1500 pixels wide when the tween is created, so the calculated width would be 750 pixels (i.e. 50% of 1500 pixels). It seems TweenMax must have this value at some point otherwise it would not know what to tween the width to, but I don't see any documented way to retrieve it. Thanks, Ethan