Fade in on scroll

[NickToye]

Hi,

 

I'm looking for some functionality which will allow me to fade in content when I scroll past it on the tablet and mobile devices.

 

I already use this plugin TweenLite but I'll be honest I don't have a clue what I am doing, this animation stuff is all new to me.

 

Can anyone point me in the direction of an example of how I can do this?

 

Nick

[Michael71]

You can capture the scroll event with:

$(window).scroll(function (e) {
var $top = $(window).scrollTop(); // how many pixels scrolled from top
});

 And then do some calculations and apply a tween

TweenLite.to(".obj", 0.5,{autoAlpha:0});

And the reverse of that, if you need to fade-in when the user scrolls back again.

 

But if you are looking for some more complex animations I would suggest: http://janpaepke.github.io/ScrollMagic/

 

Which uses GSAP at its core and gives access to many cool effects that are based on scrolling.

[NickToye]

I don't need complex.  It just needs to fade in using opacity transition.  But for desktop it behaves as a normal hover state, so I can't really use the TweenLite can I?  Don't I need to apply a class?  Mind you that wouldn't do the animation would it?

[NickToye]

I added this code:

 

$(window).scroll(function (e) {

var $top = $(window).scrollTop(200); // how many pixels scrolled from top

});

 

and it wouldn't scroll at all.

[NickToye]

Scrap all that, got myself in the deepend with that ScrollMagic.  Good call.

[Rodrigo]

Hi,

 

If you still want to do a super simple stuff you might want to try this simple approach to it:

 

See the Pen RNpBYx by rhernando (@rhernando) on CodePen

 

Of course it has none of the great features ScrollMagic has, but, with all due respect to the plugin and it's creator, if you just want to create a simple animation in one element, using a complete plugin might be like killing a fly with a machine gun instead of using a rolled news paper. Sure the fly is toast anyway but you'll have a bunch of holes in the wall. The codepen sample is like the rolled newspaper.

 

Rodrigo.

 

PS: During the making of the codepen sample no flies, nor any other living creature was harmed in any way