Jump to content

Search In
  • More options...
Find results that contain...
Find results in...
Gerben Bergman

Fade animation from side to side

Recommended Posts



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!



Link to comment
Share on other sites

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



Link to comment
Share on other sites

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

Link to comment
Share on other sites



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

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.