Animate width from left to right

[friendlygiraffe 11 Likes (Newbie)]

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

 

Thanks

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

[Sahil 2,541 Likes (Superhero)]

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.

 

[craftedbygc 2 Likes (Newbie)]

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?

[friendlygiraffe 11 Likes (Newbie)]

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 

[mikel 1,823 Likes (Superhero)]

Hi,

 

And here a proper made to measure ...

 

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

 

It could be easy.

 

Happy learning ...

Mikel

 

 

[friendlygiraffe 11 Likes (Newbie)]

Just now, mikel said:

Hi,

 

And here a proper made to measure ...

 

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

 

It could be easy.

 

Happy learning ...

Mikel

 

 

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

 

[mikel 1,823 Likes (Superhero)]

Hi,

 

like this one

 

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

 

Best regards

Mikel

[Sahil 2,541 Likes (Superhero)]

@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

 

[Carl 9,066 Likes (Superhero)]

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 {
  position:absolute;
  right:0;
}

 

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

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

[Sahil 2,541 Likes (Superhero)]

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

[Carl 9,066 Likes (Superhero)]

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

 

[Jonathan 5,176 Likes (Superhero)]

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

 

https://csstriggers.com/width

https://csstriggers.com/left

https://csstriggers.com/margin-left

 

Happy Tweening!