Does GSAP allow you to get the raw CSS value as written in the stylesheet?

[darkus]

gsap.getProperty has been a lifesaver, but it seems to give the calculated value.  For example if I have height:calc(100% - 50px); in my CSS value, gsap.getProperty will return 550px instead ofcalc(100% - 50px) (as it should).  But is there an option or flag to allow me to get it to give me calc(100% - 50px)?  And as a follow-up, can I actually gsap.to with a value such as calc(100% - 50px)

[GreenSock]

I'm not aware of a way to get that value "as written in CSS", no. The browser only reports computed values. 

 

As for animating to a value like calc(100% - 50px), I guess the answer would be "maybe, sometimes"(?) Think of it this way: animating always comes down to interpolating numbers. How would GSAP know how to tween from a value like "40px" to "calc(100% - 50px)"? There's only one number in the starting value, and two numbers in the second value. Where's the interpolation going to happen? 

 

GSAP can handle complex strings by isolating each number, matching it with the corresponding one (in order) in the other value, and interpolating between those. So the first number in the starting string gets matched with the first number in the ending string, etc. 

 

So to animate the way you're describing, a way to sorta hack that is to convert it into a computed value, so the browser makes "calc(100% - 50px)" into a pixel value like "418px" based on the current environment/state. Then you plug that number into your tween. In an onComplete, you could then hard-swap the calc() value into the style.property so that it is responsive in the way you'd expect (like if the user resizes). But of course during the animation it'd be hard pixel values. 

 

Often times when you find yourself wanting to animate a calculated value like this, it might be a clue that you're over-engineering and there might be a simpler approach. So if you want more help, just provide a super simple minimal demo that illustrates what you're trying to do (even if it's not working) so that we can understand in context and possibly offer an alternative. 

[darkus]

I believe this was a case of over-engineering.  There are (new to me) container queries, which seem to do the heavy lifting for what I am trying to accomplish and seem to animate really well with GSAP, so I'm going to start using these alot more!

 

Thanks again for the detailed explanation!!

[GreenSock]

No problem! And trust me, I've over-engineered my fair share of things myself and then I kick myself when I see a much simpler, cleaner approach. Sometimes it just takes stepping back and thinking outside the box. 

 

Glad you got things working now. Enjoy the tools!