Jump to content


Tween right to left (transformOrigin not working?)

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

For example, let's say I have a div 400px x 400px, with a background image 800px wide and offset 50% to the left. The div's overflow is set to hidden. I want to tween the width of the div to the full 800px but have it tween from the right edge of the div in the left direction, revealing the rest of the background image. I tried using transformOrigin:"right" but it didn't work. I would also want the right edge to remain stationary while the left side expanded. 


//example of div to be tweened
#test {
     width: 400px;
     height: 400px;
     /*note: background image is 800px wide and offset to the left*/
     background: url(img/test_800px.jpg);
     background-position: -400px 0;
     left: 500px;
     display: block;
     overflow: hidden;

// example of function to tween width from right edge in the left direction:
function revealBg() { 
     TweenMax.to($("#test"), 2, {width:"800px", transformOrigin:"right"});}

If this isn't correct, how else could I make something tween (width in this instance, but scale or whatever) from an origin point other than the upper left, and in a direction other than left to right.

Link to comment
Share on other sites

btw, I know I can tween the width in the normal way, and tween the position of the div left to make it look like it is expanding to the left side, and tween the background-position of the image to the right. That works for this particular instance. But it seems like the transformOrigin would be more flexible and useful in more circumstances. I'd like to know how to use it.


•ok, this works, but I would still rather be able to use the transformOrigin, though.

TweenMax.to($("#test"), 2, {width: "800px", left: "-=400px", backgroundPosition:"0px"});


•btw, this didn't work, the background was sliding, as if the left tween and the background-position tween were not in synch:

TweenMax.to($("#test"), 2, {width: "800px", left: "-=400px", backgroundPosition:"+=400px"});


• this would be best (if it worked):

TweenMax.to($("#test"), 2, {width: "800px", transformOrigin:"right"});

Link to comment
Share on other sites

Yes, transformOrigin is for css transforms like scale, skew, rotation, rotationX, rotationY etc.


As far as I know there is no way to change the width from right to left BUT you can use clip() (if your target browser's support it).


See the Pen 2f434f02de519ed3b38d812d6fe43319 by GreenSock (@GreenSock) on CodePen


Perhaps that will work for you.


I don't know why this:



TweenMax.to($("#test"), 2, {width: "800px", left: "-=400px", backgroundPosition:"+=400px"});



appeared out of sync. If it is something you would like us to investigate please provide a sample and we can look into it. Its hard to imagine how it should appear when all those properties are changing. 

  • Like 1
Link to comment
Share on other sites



As far as I know transform origin works only with CSS3 transform properties like scale, rotate, skew and such, while height and width are changed taking the top left corner as origin point. Although I'm not completely sure about this i looked at documentation of CSS1 at the W3C site and in MDN and didn't find anything regarding the origin point of height and width.


A possible solution would be to give the element a float:right value and see what happens, that should force the element to the right side of it's parent.




Hope this helps,



  • Like 1
Link to comment
Share on other sites

Turns out the clip property was just what I needed. I'm not targeting older than IE8, so it should be good. Thanks Carl! (Don't know how I didn't know about that... hmm, huge gaps in my knowledge.)


Rodrigo, the float:right was very clever. I wonder what would happen to a background image though. I haven't made the test, but I suspect it would look like it's sliding across (similar to tweening the position while tweening width).


btw Carl -- I made a JSFiddle showing the difference between tweening the background image to 0px and tweening it relatively to +=400 (as I mentioned in the above comment). The two tweens (left and backgroundPosition) seem out of sych.




Thanks both!

Link to comment
Share on other sites

Hey Sigmund,


Glad clip worked for you. Thanks for clear fiddle. Yeah, now I can totally see exactly what you mean. I don't have a good answer for you at the moment as to why that is the behavior. I'll kick it up the chain and see if we can figure it out for you. 


I noticed that you were using 1.8.4 in the fiddle. Check out the changes in 1.9.0. 



I did a test  with 1.9.0 on the fiddle and it didn't seem to resolve your issue, but there's some great new features.

  • Like 1
Link to comment
Share on other sites

Ha, I joined jsfiddle so I could post that example. Still learning the ropes on how to use it. I didn't know how to add the gsap file to make the code work, so I looked at a jsfiddle linked to from another forum thread here, and copied the URI they used for the TweenMax.js. (So blame them!)


Is there a way to browse to it, or could I just type in: cdnjs.cloudflare.com/ajax/libs/gsap/1.9.0/TweenMax.min.js



Link to comment
Share on other sites

Hi Sigmund,


You just have to fix the background image position to top right and works:

	background:#00f url('http://upload.wikimedia.org/wikipedia/commons/b/b6/Building-300x100.jpg') no-repeat top right;

I've updated the fiddle to see it in action:






  • Like 2
Link to comment
Share on other sites

Very clean and clever. The float:right and top/right properties make it very efficient. Using the float might be a problem in my particular real world instance (I'm positioning the div absolutely on the screen). I could nest it in another div and position that absolutely and have the tweened div float:right within it, but it might start getting messy. It's still a great solution that I'm sure I'll use soon, Rodrigo. thanks again!

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.