Jump to content
Search Community

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

icekomo 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

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.

 

 TweenMax.from($("#hero-container"),0.5,{width:0});

 

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

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