Jump to content
Search Community

Fading effect - Top to Bottom

alint test
Moderator Tag

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

Hello,

 

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.

 

Alin

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

Link to comment
Share on other sites

Hi,

 

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: 

http://www.colorzilla.com/gradient-editor/#9af600+0,a0fd00+50,90e700+51,a0fe00+100;Custom

 

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

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.
×
×
  • Create New...