Jump to content
GreenSock

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

Fixed header on scroll with GSAP

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

Hey WrapTheCode and welcome! Glad to have you.

 

You have a bit of code that seems a little muddied to me. Can you please try to describe the exact effect that you're going for in words? That will help us help you refractor your code to be less error prone :) 

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

Please create a minimal CodePen showing the issue or clearly explain how my pen above doesn't meet your needs. It's impossible for us to help blindly :) 

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

Now it is more clear  for me.  But if i want to have only one header element? PixiJS had 3 headers on the one page - that did not impact seo?

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

All clear, thanks for your involvement and help.

This one can be closed.

Link to comment
Share on other sites

  • 8 months later...

@ZachSaucier Hi Zach, I was playing with the requestAnimationFrame, using your demo js code. I keep having Uncaught ReferenceError: requestID is not defined. 
Any idea why? 

Link to comment
Share on other sites

Hey @DD77,

 

If you took the exact code from @ZachSaucier, that shouldn't be.
If you have changed the code, how should we know what you did and where the problem might be?

 

Please show your case.

Mikel

  • Like 1
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.

×