Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
SakalaWeb

TweenMax + css calc() function as param value.

Recommended Posts

Hi I have problem when animating with CSS calc(). It's just jump to new position, without delay and animation. Is there any special way to do css math when tweening?  How to make tween relative to viewport or container?

See the Pen KWbQxN?editors=0011 by sakalaweb (@sakalaweb) on CodePen

Link to post
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.

:)

  • Like 2
Link to post
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 post
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 post
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 post
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 post
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 post
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.

×