Jump to content


Fading effect - Top to Bottom

Go to solution Solved by alint,

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



I am struggling with the following animaton and I would like to know if it is possible to do something like this with GSAP: I would like to animate a div so it comes in from top to bottom (this is easy), once the div is in its final position I would like to fade it from top to bottom. Currently, by using alpha, the div fades as a whole. I would like to have it fade from top to bottom.


Is this possible?


Here is the pen:


Thank you.



See the Pen iuAoE by alinticlea (@alinticlea) on CodePen

Link to comment
Share on other sites



The short answer is no, you really can't progressively fade parts of a div with css.


However your pen gave me some ideas about moving a gradient around, and perhaps its suitable just to make it appear like the object is fading from top to bottom.

This is what I came up with: http://codepen.io/GreenSock/pen/zxIaA


I think if you spend some time building a gradient with gradient stops (multiple colors and opacitys) you can probably swing this with one element. Notice in my pen I have a .box with solid black background and one with a gradient sort of "glued together". Check out this tool for creating more elaborate gradients: 



To see more of what I'm doing, go into the css for demo and


- remove the overflow hidden and set the background-color to another color like grey or blue

  • Like 1
Link to comment
Share on other sites

That was a pretty cool effect with gradients Carl :)


If some of those colors were transparent..


you could probably come up where it can be used as fade swipe effect.. going from transparent to color.. very cool Carl B)

Link to comment
Share on other sites

  • Solution

Thank you Carl. That is exactly what I was trying to achieve.


I will tweak your example a little bit and I should be good to go.


Thank you.



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.