Fade animation from side to side

[Gerben Bergman]

Hi!

 

I'm working currently on a banner creative and am stumbling upon an issue. An external creation bureau has delivered a video in which the creative animation is portrayed. The video contains one animation where a section is fading in from left to right (opacity reaches 1 on the left earlier than on the right) over a background image. Is there any way to fade something in from left to right using Greensock? 

 

Thanks in advance!

 

Gerben

[mikel]

Hey @Gerben Bergman,

 

Welcome to the GreenSock Forum.

 

Here is a possible solution ...

 

 

And here the pen of @PointC

 

See the Pen yJjNOX by PointC (@PointC) on CodePen.

 

Happy tweening ...

Mikel

 

[Gerben Bergman]

Hi Mikel, 

 

Thanks for the response! I've already experimented with that kind of solution, but the problem is that I have to fade in a kind of rounded element that is placed on top of an image. If I use a mask like the example above, the image in the background also gets affected..

 

 

[mikel]

Hey @Gerben Bergman,

 

Please show us your case in a codePen.

 

 

[Gerben Bergman]

Unfortunately I cannot share the creative we are working on (for our client must give permission for that first). I've created a code pen to better illustrate what I mean.. 

 

The question is, can I fade in the pink circle (starting from left, ending on the right, using opacity) without affecting the background image?

 

See the Pen yLLpBGd by GerbenBergman (@GerbenBergman) on CodePen.

[mikel]

Hey @Gerben Bergman,

 

This is an example of the above posted topic ...

 

See the Pen bGGadbo?editors=1010 by mikeK (@mikeK) on CodePen.

 

Happy reading ...

Mikel

 

[Gerben Bergman]

Hi,

 

The fade line is really sharp, is there any way that could be avoided? 

[mikel]

Hey @Gerben Bergman,

 

Please study the above posted topic ...

Here an example with the gradient solution of @PointC

 

See the Pen vYYRYEg by mikeK (@mikeK) on CodePen.

 

Happy study ...

Mikel