I don't understand what a "wipe effect" or DIRECTIONAL fade in is "intellectually." To provide some context, here is my graphics environment:

Layer 3: if needed, I can use too (please note the runtime graphics environment only allows "simple addition" of the layers, that's all. I use GIMP to make images, the open source similar program to photoshop, but I don't care the tool, I'm tring to understand it intellectually).

Layer 2: this will be a smaller PNG image I want to do a "wipe effect" or DIRECTIONAL fade in, e.g. from left to right, over the full background below.

Layer 1: this will be whatever full background image I want.

This environment (the canvas in html) allows adjusting the opacity (or alpha) value of the entire layer, and I have the code to do this over time (that's easy). My problem is, I don't understand "intellectually" what I need to do, to give the appearance of something (a png) image fading in "left to right".

E.g. if I were to create a gradiated black to alpha layer 3, I can do that too, but I think unless I make it exactly match the outline of the graphic I'm seeking to fade in, it will equally "disturb" the background, right? So ... how is this done "intellectually", please? Do I even need 3 layers, or is 2 fine?

  • Hi Ray, where are you making this document? Could you add the application tag please.
    – user120647
    Jun 19 '19 at 13:22
  • So, I use gimp to produce graphics, and the html canvas with javascript to do the animation. Thanks I updated the question, but since I'm looking just for the intellectual "how to", I don't want to put these tags, unless needed. Meaning, the tool to do it, shouldn't matter ??
    – Ray
    Jun 19 '19 at 13:37
  • Yes, but how is that used, to make something look, like it is being faded IN, FROM LEFT TO RIGHT (or top to bottom, etc).
    – Ray
    Jun 19 '19 at 13:41
  • 1
    have you tried searching for the terms in your question? directional fade / wipe effect, fade animation? It seems your question is more about code implementation
    – Luciano
    Jun 19 '19 at 13:46
  • 1
    So do you want to know how to create a gradient wipe with graphics, or learn how does the computer/code do? What do you mean "to understand intellectually"? Also please don't ask multiple questions in one.
    – Luciano
    Jun 19 '19 at 13:52

To do a directional fade in, put the image you want to be revealed at the bottom layer. Put the image visible at first above it. Then put the gradient or other mask on top.

As the gradient or mask moves across the page, cut the visible image when it's covered by the gradient. This will then reveal the bottom (new) image.

If you want to do this without a top level mask or gradient, simply do the cutting.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.