friendlygiraffe

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

 

Thanks

Share this post


Link to post
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

Share this post


Link to post
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?

Share this post


Link to post
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 

Share this post


Link to post
Share on other sites

Hi,

 

And here a proper made to measure ...

 

 

It could be easy.

 

Happy learning ...

Mikel

 

 

  • Like 1

Share this post


Link to post
Share on other sites
Just now, mikel said:

Hi,

 

And here a proper made to measure ...

 

 

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):

 

 

Share this post


Link to post
Share on other sites

Hi,

 

like this one

 

 

Best regards

Mikel

  • Like 3

Share this post


Link to post
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.

 

 

  • Like 5

Share this post


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

 

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

  • Like 3

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

 

  • Like 1

Share this post


Link to post
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:

 

 

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! :)

 

  • Like 4

Share this post


Link to post
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.