calc() Problems with calc values

[Taylan]

Hello all. I know using calc in JS is not recommended. But as long as it is not in the not supported category, I'd call these bugs.

 

Click the toggle button twice and now the h1 has top: 4.75px instead of calc(1vh). I don't know if GSAP is trying to optimize something, but even if it is it should set 1vh, not 4.75px.

 

It's jumping to some huge values.

See the Pen YzqONVR by taylankasap (@taylankasap) on CodePen

 

It is changing values (see devtools) even when from and to are same.

See the Pen MWyqJdO by taylankasap (@taylankasap) on CodePen

 

It would be good if I could let CSS calculate things for me but with these issues I don't think it's possible. I guess I'll not use calc, just wanted to let you know of these issues.

See the Pen ZEWMLbB by taylankasap (@taylankasap) on CodePen

[ZachSaucier]

Hey Taylan. Using calc in your tween values is 1) slow, 2) more resource intensive, and 3) doesn't make much sense to do since you're animating with JavaScript. We highly  recommend not using calc because the performance is going to be much worse. This has to do with how the browser updates things, not an issue with GSAP being slow somehow (it's not). 

 

We also recommend avoiding animating non-performant properties like top. Use transforms instead - with GSAP you can use the y property in this case. 

[Taylan]

I'm aware of these. But the thing is, in the project I'm currently working on I've tried using calc for a very small animation where performance wouldn't be an issue. If I write JS, it will probably be around 30 to 60 lines of code.

But like I said, I'm not asking for help. I will probably use CSS transition for this one. I just wanted to let you know of these issues. (Maybe I should open a GitHub issue?)

[ZachSaucier]

9 minutes ago, Taylan said:

If I write JS, it will probably be around 30 to 60 lines of code.

Hmm. I doubt that. If you want to share what you're trying to do perhaps we can help.

 

9 minutes ago, Taylan said:

I just wanted to let you know of these issues. (Maybe I should open a GitHub issue?)

Thanks! We'll consider where we can improve GSAP in regards to this without it costing too much. No need to raise an issue on GitHub, posting here about it does effectively the same thing.

[GreenSock]

Thanks for the suggestion/report. Yeah, the challenge is that the starting values are computed (the browser always reports them as px), so it's like telling GSAP to animate from "24px" to "calc(20vh / 2)" which doesn't make a lot of sense. GSAP is like "how the heck do you expect me to interpolate that?" It can do complex strings when the formats match up, but that's not the case here. However, I do think it's reasonable to attempt first to pull the starting values from the "from" vars directly and use the computed values as the fallback. That'd make edge cases like this work as long as you use similar formatting in the "from" and "to" values. Sound good? 

 

I've made that change in the next release which you can preview at https://assets.codepen.io/16327/gsap-latest-beta.min.js

 

Better? 

[Visual-Q]

Couple of pens from back in the day using calc and css variables from Blake:

 

See the Pen OvbqXL by osublake (@osublake) on CodePen

 

See the Pen 348b53aa3d39c06a9bf3eba7e0359bc8 by osublake (@osublake) on CodePen

[Taylan]

 

4 hours ago, GreenSock said:

I've made that change in the next release which you can preview at https://assets.codepen.io/16327/gsap-latest-beta.min.js

 

Better?

That was fast and it works in 3 cases I've reported. Better indeed! Thank you.

 

2 hours ago, Visual-Q said:

Couple of pens from back in the day using calc and css variables from Blake

Unfortunately I have to support IE and I don't think this works there. But this is a great idea. I will keep in mind for future projects. Thanks.