Jump to content
GreenSock

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

Tweening CSS x/y values with percentages

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 post
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 post
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 post
Share on other sites

hi,

 

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,

Cheers,

Rodrigo.

Link to post
Share on other sites

Hi,

 

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

$(window).smartresize(function(){
self.onResize();
});
 
then:
 
 
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 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.

×