Jump to content
Search Community

Tweening properties using calc()

OSUblake test
Moderator Tag

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

I'm wondering why I have to explicitly set CSS properties that use calc() with GSAP before being able to Tween to a calculated value? It doesn't matter if the value is set with CSS beforehand, I still have to register it with GSAP before being able to animate it.

// Have to set if first
TweenMax.set(element, { width: "calc(25% - 10px)" });

// Now I can tween it
TweenMax.to(element, 0.5, { width: "calc(100% - 10px)" });

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

Link to comment
Share on other sites

Hello OSUBlake,

 

There are currently bug reports out for CSS calc() .. not sure if its related to what you are seeing or not seeing:

 

IE Bug Report:

https://connect.microsoft.com/IE/feedback/details/733978/css-animation-dont-accept-calc-as-property-values

 

Firefox Bug report:

https://bugzilla.mozilla.org/show_bug.cgi?id=956573

 

Webkit Bug only has to do with using viewport units with calc(), so that is unrelated

https://code.google.com/p/chromium/issues/detail?id=168840

 

Other info:

http://caniuse.com/#feat=calc

 

Maybe one of The GreenSock Grandmasters (Jack and Carl) can shed some more light into this.

 

;)

  • Like 1
Link to comment
Share on other sites

  • 3 weeks later...

I have a similar issue.

Consider the 

See the Pen xbYxrX by ThomasBurleson (@ThomasBurleson) on CodePen

 which has the following html gridlist using "calc( )" for its style-based positioning:

 

gridList_snap1.png

<md-grid-list md-cols-sm="1" md-cols-md="2" md-cols-gt-md="6" md-row-height-gt-md="1:1" md-row-height="4:3" md-gutter="8px" md-gutter-gt-sm="4px" class="ng-isolate-scope" role="list">
    
  <md-grid-tile style="left: calc(((16.6666666666667% - 3.33333333333333px) * 0) + 0px); width: calc(((16.6666666666667% - 3.33333333333333px) * 2) + 4px); padding-top: calc(((16.6666666666667% - 3.33333333333333px) * 2) + 4px); margin-top: calc(((16.6666666666667% - 3.33333333333333px) * 0) + 0px);"></md-grid-tile>
  
  <md-grid-tile cstyle="left: calc(((16.6666666666667% - 3.33333333333333px) * 2) + 8px); width: calc(((16.6666666666667% - 3.33333333333333px) * 1) + 0px); padding-top: calc(((16.6666666666667% - 3.33333333333333px) * 1) + 0px); margin-top: calc(((16.6666666666667% - 3.33333333333333px) * 0) + 0px);"></md-grid-tile>
  
  <md-grid-tile style="left: calc(((16.6666666666667% - 3.33333333333333px) * 3) + 12px); width: calc(((16.6666666666667% - 3.33333333333333px) * 1) + 0px); padding-top: calc(((16.6666666666667% - 3.33333333333333px) * 1) + 0px); margin-top: calc(((16.6666666666667% - 3.33333333333333px) * 0) + 0px);"></md-grid-tile>

  <md-grid-tile style="left: calc(((16.6666666666667% - 3.33333333333333px) * 4) + 16px); width: calc(((16.6666666666667% - 3.33333333333333px) * 2) + 4px); padding-top: calc(((16.6666666666667% - 3.33333333333333px) * 1) + 0px); margin-top: calc(((16.6666666666667% - 3.33333333333333px) * 0) + 0px);"></md-grid-tile>    

</md-grid-list>
 

When the gridlist reflows to a new layout, I have a callback [registered with the gridlist layout engine] that will intercept the layout request. The interceptor is provided the desired style changes for each tile.  

 

Here is the attempted animation code using GSAP:

function onAnimateGrid(grid, tiles){

  var position = 0;
  var tl = new TimelineMax({paused:true});

  tl.to( grid.element[0], 0.1, grid.style );

  tiles.forEach(function(it) {
    tl.to( it.element[0], 0.350, it.style, position );
    position += 0.3;
  });
    
}

When I try to using GSAP to animate those, the duration values are totally ignored. 

Link to comment
Share on other sites

Hi Thomas,

 

I don't know what the status of this issue is, but in the past I've been able to get around this by doing a fromTo tween. Unfortunately, I can no longer get that to work. Even trying to animate just one of the calc() properties in your demo will not work. 

 

Also, I doubt this has anything to do with this, but the grid won't start when the screen is smaller than ~600px. This error always shows up:

md-grid-list: Tile at position 0 has a colspan (2) that exceeds the column count (1)

 

If anybody else wants to check this out, here's the CodePen with the timeline code in it. You should see the tiles animate to a new position when you resize the screen.

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

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...