Jump to content
Search Community

Tweening CSS x/y values with percentages

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

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

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