Jump to content
Search Community

Animate width from left to right

friendlygiraffe 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

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

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 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 ?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

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

 

https://csstriggers.com/width

https://csstriggers.com/left

https://csstriggers.com/margin-left

 

Happy Tweening! :)

 

  • Like 4
Link to comment
Share on other sites

  • 3 years later...
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 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...