Jump to content
Search Community

Fixed header on scroll with GSAP

WrapTheCode test
Moderator Tag

Recommended Posts

Hello everyone

 

I have just stared using GSAP - it is awesome.

 

I try to get animation for fixed header that will be triggered on scroll. 

 

My Pen is working but i noticed a bug and i don't know how to eliminate it.

When i take scrollbar and fast move down then up header is breaking.

 

In my opinion, the first timeline did not end and the second one did not wait for it. 

 

Anyway i don't know how to achieve same effect without this bug.

 

Maybe i need to rework whole code?

 

Many thanks for any advice.

See the Pen xxGBrwM by wrapthecode (@wrapthecode) on CodePen

  • Like 1
Link to comment
Share on other sites

I will try describe it as i can(English is not my native language - sorry for it :) ).

 

First of all:

1. I want to have a header that is positioning absolute (it need bigger space from top at first view of page)

2. When user scroll ex. 300px - header will slide to top(outside viewport) and then with little delay and css changes( like padding, background and logo size) it scroll from top (it is positioning absolute so we wont see when he is going outside viewport).

 

That was first phase.

 

The second one:

1. Current position - Header is after first timeline animation and user scroll is more than 300px from top.

2. When user would like scroll back to top:

     1) When scroll from top will be less than 300px - header should slide up outside viewport(animation should be faster than in first phase).

     2) Header should change position to the initial position (absolute) and some css like logo height.

     3)  It should slide from top to the initial position when it was before first phase.

 

The animation should repeat every time when user scroll down and when he would scroll to reach top.

     
 

 

Link to comment
Share on other sites

Thanks for the explanation. I think I understand what you're wanting to do. 

 

I think the key error is that your code above doesn't really handle overwriting well. What I mean by overwriting is when two animations are both trying to control the same properties of the same elements. There's conflict because you're telling it to be two values at the same time.

 

The easiest way to handle this in your case is to change GSAP's default overwrite value from false to 'auto'. That will cause tweens to kill other tweens that it's in conflict with. You can change that setting globally by using gsap.defaults({overwrite: 'auto'}); Alternatively you could apply overwrite: 'auto' to just the tweens that could into conflict. 

 

Some other improvements you could make:

  • Use GSAP 3's new syntax (no need for TimelineMax, TweenMax, etc.).
  • Put the duration inside of the vars parameter so you can use defaults.
  • Chain tweens on the timelines (I think it helps make it more clear that they are all on the same timeline). 
  • Just use scrollY for the scrolling position.

All that put together:

See the Pen XWbGavp?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Awesome! 

 

It is also correct!

 

Phase 1 is that what i supposed to be.

 

Phase 2 is going to fast outside viewport and header lost its background before it slide up. Also logo is jumping( I want to be the same that is in code that i provided but without bugs).

 

Anyway You  made amazing work and give me a large portion od knowledge.  I'm very thankfull for this help. I will try to get it works correct tomorrow.

 

One more time - Thanks !

  • Like 1
Link to comment
Share on other sites

Hello again.

 

Unfortunately i cant get it to work. Position, background and padding rules in Phase2 are added immediately. There is ugly jump of style not smoothly slide up  then down. i tried to use delays, positioning etc. I know that set class trigger changes immediately so i try to change it to  .to - same problem.

 

I still need help.

Thanks for your patience.

Link to comment
Share on other sites

8 minutes ago, WrapTheCode said:

Same effect like on this page :

https://www.pixijs.com/

Thanks for the example! Much more clear now. 

 

The PixiJS site actually uses two navigation elements. It makes the logic much more simple, though it is doable with one navigation element. 

 

With two navigations you just need the following logic:

  • Add a slight parallax effect on scroll for the first navigation. I show a basic demo of how to do that in this demo:

    See the Pen BaNPoEK?editors=0010 by GreenSock (@GreenSock) on CodePen

  • If the scroll position is past some point that you want it to show the secondary nav, animate it in. If it's less than that, reverse the animation. 

Simple!

  • Like 2
Link to comment
Share on other sites

23 minutes ago, WrapTheCode said:

if i want to have only one header element?

Like I said, it's doable. You just need to get the logic correct and handle the situation where there's conflict better. As much as we love helping people around here, we just don't have the resources to fix logic that doesn't directly relate to GSAP. 

 

23 minutes ago, WrapTheCode said:

PixiJS had 3 headers on the one page - that did not impact seo?

I don't claim to be an SEO expert by any means, but it's not a terrible thing to have multiple <nav> elements on a page AFAIK. Searching recent articles on the web might be more helpful there.

Link to comment
Share on other sites

  • 8 months later...

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...