Jump to content
Search Community

Fade in on scroll

NickToye test
Moderator Tag

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



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?



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



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.




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