[Tweening CSS x/y values with percentages]

Ah bummer. Using percentages for transforms is great for sliding panels/drawers, since the percentage corresponds to the element's dimensions (move it 100% in one direction to hide/reveal) (and transform: translate performs much better on mobile than positioning). In a liquid layout this is particularly useful. I see the challenge in trying to implement though, it's a shame transform matrices don't have units (conceptually odd to me  

[Tweening CSS x/y values with percentages]

I'm trying to tween a percentage value on a div for css transform: translateX() with the following code:

 

TweenMax.to(this.ui.$drawer, 0.5, {

    css: {x: '-100%'}

});

 

The element has transform: translateX(0%) applied initially.

 

However, it appears that the tween is just converting the string to a unit-less integer in the transform matrix instead of treating it as a percentage 1-100. So, the div ends up moving -100px instead of -100%.

 

Is there any way to use percent values with the x and y css tween properties? Percentages seem to work ok for absolute position top/left, but I'm trying to take advantage of improved performance with transform: translate in mobile browsers. I'm working with a liquid layout so being able to use percentages would be extremely helpful.