WrapTheCode

All clear, thanks for your involvement and help. This one can be closed.

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?

Same effect like on this page : https://www.pixijs.com/

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.

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 !

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.

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.