Jump to content


Trying to change the width of a DOM from right to left

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

This seems like it would be an easy thing to figure out, but I can't seem to find what I'm looking for.


I want to animate the width of a div from right to left. It seems that this works left to right by default.




I tried to change the origin of the div, but that didn't seem to make a difference.



Link to comment
Share on other sites

While animating width, you can't set origin as it won't be a transformation. Instead you can set div to float right, as a result it's width will shrink to right instead of left.


See the Pen bYNwQq by Sahil89 (@Sahil89) on CodePen


Another way you can do it is by animating scaleX instead of width and set origin to ''100% 50%". It will cause the element to shrink to right.


See the Pen rYaWBQ by Sahil89 (@Sahil89) on CodePen


  • Like 2
Link to comment
Share on other sites

A 3rd option is to make sure position is set to relative (or maybe absolute) and animate the "left" property at the same time as "width". Like if you want to animate it from 0 to 500px, you could animate left from 500px to 0 at the same time. Just a thought. :)

  • Like 4
Link to comment
Share on other sites

Depends on what you're doing, but you could also position your container using the "right" css property, and just animate the width.


See the Pen aVzPVK by osublake (@osublake) on CodePen


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