Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
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

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

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

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 

Link to post
Share on other sites
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

 

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.

 

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

 

  • Like 5
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;
}

 

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

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

 

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

 

  • Like 4
Link to post
Share on other sites
On 12/7/2017 at 8:13 PM, Carl said:

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.

How to increase the speed of this animation?

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.

×