Jump to content


Animate width from left to right

Recommended Posts

I'm trying to animate a div (mask) from left to right using width, keeping the text static. 


I have tried to achieve this using transformOrigin & marginLeft


Any other suggestions welcome



See the Pen EbzqLQ by friendlygiraffe (@friendlygiraffe) on CodePen

Link to comment
Share on other sites

Here is similar thread. I am not completely sure but I remember reading @Jonathan's comment recently where he advises to not animate margins as it will cause browser to repaint layout.


  • Like 4
Link to comment
Share on other sites

TweenLite.defaultEase = Power0.easeNone;

TweenMax.set(".mask1", {transformOrigin:"100% 50%"});
TweenMax.set(".mask2", {transformOrigin:"0% 50%"});

TweenMax.fromTo(".mask1", 2.2, {width:"0px"}, {width:"300px",  ease:Power0.easeNone, repeat:-1, repeatDelay:2})

TweenMax.fromTo(".mask2", 2.2, {width:"300px"}, {width:"0px", ease:Power0.easeNone, repeat:-1, repeatDelay:2})


Having different transform origins and using fromTo gets you the result I think you are looking for?

Link to comment
Share on other sites

11 minutes ago, Sahil said:

Here is similar thread.


Thanks Sahil, I couldn't see a solution on that thread that kept the contents (text) static 

Link to comment
Share on other sites

Just now, mikel said:



And here a proper made to measure ...


See the Pen a83f0373bb538d1745958cfafae88ceb by mikeK (@mikeK) on CodePen


It could be easy.


Happy learning ...




Thanks Mikel, nearly - I need the text be static


Here's a better example of what I mean. Have a look at the red version for what I'm trying to achieve (without having to animated the text):


See the Pen OOeLxW by friendlygiraffe (@friendlygiraffe) on CodePen


Link to comment
Share on other sites

@friendlygiraffe whenever you are animating any element, make sure to set it's position. Otherwise you will see a lot of unexpected behavior.


@craftedbygc When you are animating width, transform origin doesn't really matter. It is only taken in consideration when you are doing any transforms like scaling, animating skewX/skewY etc.


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


  • Like 5
Link to comment
Share on other sites

I haven't looked at all the examples in depth but setting right:0 on the element will make it grow from the right when you increase its width.


.mask2 {


See the Pen MOMawx?editors=1010 by GreenSock (@GreenSock) on CodePen

The trick is just putting it in the proper place to begin with.

  • Like 3
Link to comment
Share on other sites

@Carl he wants the text to be static, more like clipping effect. I didn't read it on first response either. :D

Link to comment
Share on other sites

@sahil, thanks for the clarification. I didn't get that from his first post and demo. makes sense.


  • Like 1
Link to comment
Share on other sites

Hello @friendlygiraffe, why not just use an SVG clip-path or SVG mask?


Examples of animating the SVG <mask> element using the GSAP AttrPlugin:


See the Pen EbBKOz by jonathan (@jonathan) on CodePen


You want to stay away from animating left, margin-left or width since they trigger layout like @Sahil advised above. which means the browser has to calculate the layout on each render tick, which equals bad janky (lost frames) jitter bug ;)






Happy Tweening! :)


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