Jump to content
Search Community

TweenMax + css calc() function as param value.

SakalaWeb test
Moderator Tag

Go to solution Solved by PointC,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

  • Solution

Hi SakalaWeb :)

 

You wouldn't need to use CSS calc() in your JavaScript. I think innerHeight and innerWidth would help with your calculations. So something like this:

var h = window.innerHeight;
var w = window.innerWidth;

That will give you the window dimensions. From there you can calculate the center by dividing each by two and then position your box in the center. (or as close to center as you want it).

 

More info:

https://developer.mozilla.org/en-US/docs/Web/API/Window/innerHeight

https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth

 

Hopefully that helps.

 

Happy tweening.

:)

  • Like 2
Link to comment
Share on other sites

 

Hi SakalaWeb  :)

 

You wouldn't need to use CSS calc() in your JavaScript. I think innerHeight and innerWidth would help with your calculations. So something like this:

var h = window.innerHeight;
var w = window.innerWidth;

That will give you the window dimensions. From there you can calculate the center by dividing each by two and then position your box in the center. (or as close to center as you want it).

 

More info:

https://developer.mozilla.org/en-US/docs/Web/API/Window/innerHeight

https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth

 

Hopefully that helps.

 

Happy tweening.

:)

 

 

Ok it's working but what when I need to do that calculations in some responsive container. Do I need to refer to parent element.rect -> do calcs -> pass vars to tween? Is css calc() function problematic?

Link to comment
Share on other sites

You can set up a resize() event listener and do some new calculations when the user resizes their browser window. We've had numerous threads about responsive design and recalculating positions. Here's a really good one:

 

https://greensock.com/forums/topic/15214-animating-object-to-center-of-window-scale-based-on-window-size-percentage/

 

For more info about responsive design and tweens, I'd recommend this blog post by Carl:

 

https://greensock.com/gsap-1-13-1

 

css calc() is fine for a little math in your CSS, but with JavaScript you have access to all kinds of ways to get dimensions and positions of your window and elements so I'd recommend using those methods.

 

Happy tweening.

:)

  • Like 2
Link to comment
Share on other sites

We recently had an issue where we needed to use calc() in a tween to get the width (100%) of and object and then to add extra padding around the outside to allow an object to move around a responsive button. We found that when doing this.. it didn't work:

TweenMax.fromTo("#divName", 1, {x:0}, {x:'calc(100% - ${15 + (this.props.left || -9)}px)'});

 

However, if we used the calc function for both properties

TweenMax.fromTo("#divName", 1, {x:'calc(0% - 9px)', {x:'calc(100% - ${15 + (this.props.left || -9)}px)'});

 

it worked fine. Not sure if this is relevant to this particular use case but it was a headache to track down this and hopefully it will help someone who wants to use the css calc function in a tween.

Link to comment
Share on other sites

@catchnewyork, thanks for sharing the info. Yeah, we don't officially support calc() because that's rather tricky and not exactly reliable. The browser always reports computed values without calc() (for transforms, it's a pixel-based matrix() or matrix3d(), for example). With enough extra code and conditional logic added to CSSPlugin, we probably could wedge something like that in there, but I'm not sure it'd be worth the extra kb and slowdown. If we get enough requests, though, we'll certainly consider it. 

 

Oh, and it was probably a bit of a fluke that it worked in your 2nd example, and it likely had to do with the string-parsing that's in the core which allows you to tween two strings with complex values as long as the quantities match. 

  • Like 3
Link to comment
Share on other sites

I agree with Jack and PointC that there is no need to use CSS calc(), when using Javascript. It is still listed as experimental in the CSS spec, and it has a lot of bugs and inconsistent behavior cross browser.

 

Here is a list of the following known issues with CSS calc():

  1. IE11 does not support transitioning values set with calc()
  2. IE 9 - 11 and Edge do not support width: calc() on table cells. Bug Report
  3. Firefox does not support width: calc() on table cells. Bug Report
  4. IE11 is reported to have trouble with calc() with nested expressions, e.g. width: calc((100% - 10px) / 3); (i.e. it rounds differently)
  5. IE11 is reported to not support calc() correctly in generated content
  6. Firefox <48 does not support calc() inside the line-height, stroke-width, stroke-dashoffset, and stroke-dasharray properties. Bug report
  7. Safari & iOS Safari (both 6 and 7) does not support viewport units (vw, vh, etc) in calc().
  8. IE & Edge are reported to not support calc inside a 'flex'. (Not tested on older versions)
    This example does not work: flex: 1 1 calc(50% - 20px);
  9. IE 9 - 11 don't render box-shadow when calc() is used for any of the values
  10. IE10, IE11, and Edge < 14 don't support using calc() inside a transform. Bug report
  11. IE10 crashes when a div with a property using calc() has a child with same property with inherit.

Happy Tweening :)

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...