Animating text from right to left

[marcusps1]

I have some tex that needs to disappear from right to left (it is getting wiped away by a windscreen wiper)  Currently I have it so it fades out but I need it to disappear differently.

 

Here is my current code 

this.timeline.from(".section1", speed, {opacity: 0}, "-=" + (speed / 2));
this.timeline.to(".section1", speed, {opacity: 0, delay: 2});

How would i do this?

[Carl]

HI and welcome to the GreenSock forums,

 

For questions like these it is very important that we can see what is happening.

Please post a very simple demo with just the code necessary to illustrate the issue:

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

You said you need it to work differently but I'm not sure what that means. Please clarify. Thanks!

[ohem]

Hey Marcus, are you talking about masking it away?  If it's just disappearing from right to left, you could put it in a div with the overflow set to hidden and then tween the width of the div so that it disappears.

 

You can also use clip rect for straight lines: 

See the Pen eZgywN by ohem (@ohem) on CodePen

 

Or if it needs to be wiped away at an angle, you could use/rotate SVG masks, or possibly MorphSVG could make sense too.  Here's an example of SVG masks using MorphSVG.  I forked it a while ago for future use:

See the Pen MaoMvo by ohem (@ohem) on CodePen