Jump to content
GreenSock

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

Fade in on scroll

Recommended Posts

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

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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 ;)

  • Like 3
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.
×