Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Sign in to follow this  
Thales Ribeiro

Sticky header animation onScroll

Recommended Posts

Hi there, 

i'm trying to do one of those animations on the header as you scroll down.

 

I want it to be a very nice and smooth transition. I'm trying to do in such a way that i could easily re-use the code in different projects, just changing the timeline animation.

 

Basically, when you scroll down 50px, an animation would play instantly, at the moment i'm adding a class "sticky" to my header, so i can control the position thru css, but i can't get the animation working.

 

I'm sure there's something missing on my code, just can't figure out what it is.

$(function() {
    var header = $(".header");
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();

        if (scroll >= 50) {
            header.removeClass('not-sticky').addClass("sticky");
            console.log("sticky")
        } else {
            header.removeClass("sticky").addClass('not-sticky');
             console.log("notsticky")
       }
    });
});


var headerAnim = new TimelineLite({});
headerAnim.to(".sticky", 1, {css:{background:'#ccc'}, color:'#fff', ease:Back.easeOut});
//>> animate logo in, etc
 
Link to post
Share on other sites

Does it not work better if you change the headerAnim target to .header (since I can only assume that your default HTML doesn't have sticky on the header when the page loads)?

 

You're not using the css wrapper consistently (backgroundColor inside, color outside) so the color tween would be skipped - it's easiest to just leave it out though since it's not required anymore.

$(function() {
    var header = $(".header");
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();

        if (scroll >= 50) {
            header.removeClass('not-sticky').addClass("sticky");
            console.log("sticky")
            headerAnim.play()
        } else {
            header.removeClass("sticky").addClass('not-sticky');
            console.log("notsticky")
            headerAnim.reverse()
       }
    });
});


var headerAnim = new TimelineLite({paused:true});
headerAnim.to(".header", 1, {background:'#ccc', color:'#fff', ease:Back.easeOut});

Also, you might want to throttle or debounce that scroll handler http://benalman.com/projects/jquery-throttle-debounce-plugin/

Link to post
Share on other sites

Hey mate, 

thanks for your help again.

 

It's working now, is this the best way of doing it then ? I'm just trying to make the transition smooth and somehow organic, not something that the user scrolls and then it takes saconds to animate.

 

I'm having  a look at this link you sent, what's this throttle or debounce for?

 

Thanks

Link to post
Share on other sites

There's not really a 'best' way to do it - just implement things in a way that suits you and your project and I'm sure you'll be fine. If it works, it works =) Perhaps you could also try creating the color tweens each time instead of using a timeline. You might find that setting different durations and eases for the 'in' and 'out' animations works well for you. Who knows?

 

----

 

Scroll events usually fire many times a second (I would expect at least at refresh rate of 60 times per second). You should see hundreds of "sticky"/"notssticky" being logged if you watch the console while you're scrolling. Querying the scrollTop and changing classes every single time has a good chance of triggering some level of reflow/paint too. Because of this, it's usually not wise (or necessary) to run logic on every single update, hence throttling, or debouncing the scroll logic.

 

In your case I think throttling would be a good choice - you could throttle it to running every ~1-200ms, which would stop it from running 60 times per second to 5, and it should still feel pretty snappy.

 

Here's a quick way to implement throttle without including any plugins

http://forums.greensock.com/topic/7205-scrollto-bug-in-182-in-safari-602-mountain-lion/#entry35063

  • Like 1
Link to post
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
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×