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.