Fading in a div from bottom to top.

[FukuokaBoy]

Hello,

 

I'm pretty new to GSAP so apologies if this has been asked before(i had a search around but couldn't find an answer).

 

I have a div (see image) that i want to fade in (without the actually div moving) from the bottom of the element  to the top. What syntax would i need to use to do this? I managed to make the item move down using 

 

gsap.from('.card',{opacity:0,duration:2,ease:'ease',y:-50});

but this slowly moves the item down rather the desired effect I'm looking for.

 

Thanks in advance.

[GreenSock]

Browsers don't really let you do that kind of thing natively, but you could "fake it" by creating a gradient that matches your background color at the bottom, and then at the top you'd gradate to transparent. Then just put that image over your element(s) starting at the bottom, and animate it up (using a "y" or "yPercent" tween) until it's totally covering it. That way, it looks like it's just the background, but it's really an image covering your element(s) to obscure them. 

 

Does that make sense? 

[akapowl]

 

Here's an example of what that could look like.

 

The original topic in that thread was a different one, but the effect you are looking for is in that codepen.

 

 

 

 

Edit:

I actually meant this thread here, that has the basic animation (without all that ScrollTrigger related stuff) in the codepen of the initial question.