Jump to content


Tweening CSS x/y values with percentages

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 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.
Link to comment
Share on other sites

Sorry, but percentage-based transforms aren't supported right now (to be honest, they seem conceptually odd to me and they can't be expressed consistently in a matrix which is what we've used to boost performance a bit).

Link to comment
Share on other sites

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 :) 

Link to comment
Share on other sites



You could store that value in a general scope variable and for orientation changes you can use a resize event in order to change that value to the current one.


Hope this helps,



Link to comment
Share on other sites



I had a similar problem - have to tween fullscreen div . This is what I did:

1) used debounced resize to calculate the position (


I have a variable called "step" and I calculate it on every resize based on the window width:

//or you can calculate just onResize()

onResize: function(){

var self = this;

var winWidth = $(window).width();
self.bgPercentStep = (0.5*winWidth) / self.numSlides; // 

And the tween 
TweenLite.to( self.$bgImage, self.settings.transitionTime, { x: "-" + parseInt( self.currentSlideIndex * self.bgPercentStep ) + "px" })

If you need help with this, just post me your code :) I'll try to respond you on the next day.


Cheers, Ico 

  • Like 3
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.