Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
alint

Fading effect - Top to Bottom

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: https://codepen.io/alinticlea/pen/iuAoE

 

Thank you.

 

Alin

Share this post


Link to post
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

Share this post


Link to post
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)

Share this post


Link to post
Share on other sites

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.

 

Alin

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×