ScrollTrigger show/hide Navbar on scroll up/scroll down

[lagalga]

i don't know if this is the place to post my question, i think it's related… 

I have based on the first code to hide the header when scrolling down and it appears when scrolling up... but I also have an animation of the logo at the top of the page and I don't know how to join the 2.

The sticky header and the logo are in separate divs, although after the first animation they seem together... but I want that when a 150vh of scroll down is done, the header + logo set is hidden upwards, and that they appear again when scrolling up... all always in the area below 150vh from the top of the page...
This is what I have arrived at:

 

Orignal topic 

 

See the Pen poBmoav by lagalga (@lagalga) on CodePen

Edited April 30 by lagalga
translate to english

[mvaneijgen]

Personally I would always create timelines in GSAP and have ScrollTrigger control the timeline you create. I've restructured your JS and give all your ScrollTrigger an ID so that when markers are on you can see when what is happening. I'm not sure if 150vh works like that in ScrollTrigger, but I personally would just the current window.innerHeight and then times 1.5 to get 150%. 

 

I’ve placed some comments in your JS to better explain things, please be sure to read through them! Hope it helps and happy tweening! 

 

See the Pen oNORgwJ?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[lagalga]

i've just changed 150vh with :

 

const vh = (coef) => window.innerHeight * (coef/100);

…

start: vh(133) + ' top',

 

And it triggers well… the thing is how to hide/show the logo simultaneously with the header? If i set the same animation, the logo doesn't do the first (shrink animation)

 

[mvaneijgen]

Just change the duration of the logo animation so that it lines up how you want. Please share a new (forked) demo with what you've tried, so that we can take a look at what you've changed. 

[lagalga]

oh, you did it! thank you.

I just updated the codepen, but trasnferred the solution to my wordpress develop site and it runs like butter.
Thank you so much

[lagalga]

one more thing, sorry…

how do i resize the logo width with window resizing?

I've set it to a portion of vw… and when i resize the window, the logo stays the same size

[mvaneijgen]

instead of animating width try setting the scale of the element, this is much more performant and has the befit that the logo is still responsive (see your demo on line 14) change width: "236px" to something like scale: 0.2, or another value that looks better. 

[lagalga]

the thing is at start, before the animation starts, it don't resize, although the width is set to width: calc(100vw - 100px).

I do need those widths: based on width at start AND 236px at the end… making the value change with scale would involve a formula based on the width of the screen which in the end should result in a value of 236px

 

https://capture.dropbox.com/mpWJ5kxvlCb7CD2F

[mvaneijgen]

9 minutes ago, lagalga said:

of the screen which in the end should result in a value of 236px

If that is important check out the Flip plugin with Flip.fit https://gsap.com/docs/v3/Plugins/Flip/static.fit()/

[lagalga]

i've tested using scale instead of fixed width, it resizes horizontally but it doesn't reposition vertically

See the Pen jORoWay by lagalga (@lagalga) on CodePen

 

I'll try with Flip, let's learn!