Translating element off screen on scroll

[amitr95]

I'm trying to get a simple header animation working where, when a user scrolls, .header__topNav scrolls up off screen, making only the main nav visible (and moving the main nav up so that there's not huge space above once .header__topNav translates off screen. 

 

And then to bring it back when a user scrolls to the top of the page.

 

I've seen the demos which showcase usage of yPercent on scroll, but it's not working as described above. In addition to this, why does the yPercent change initially on the demo? It should change on scroll only?

 

See the Pen bGjRjzp by amit_rai95 (@amit_rai95) on CodePen

[GreenSock]

That's because you set the ScrollTrigger to start when the top of the topNav hits the CENTER of the viewport...but even before you scroll at all, that element is already at the very top of the viewport, thus it's PAST the starting point. I assume you meant to do start: "top top"? 

 

I'm not entirely sure what effect you're going for, but are you sure you want scrub: true? That means if the user scrolls a little bit past the start and then stops scrolling, the element would only move a little bit and stop. Wouldn't you want it to act more like a trigger point to play/reverse the animation so that the user would never see it "stuck" mid-tween? If so, here's probably how I'd do it:

See the Pen MWBoZvX by GreenSock (@GreenSock) on CodePen

 

Notice that I set start: 10 because I wanted it to only fire after the user scrolls 10 pixels down from the top. Obviously you can set that to whatever you want. And I'm using toggleActions instead of scrub. 

 

You may also want to look at this approach in case it's helpful - it will show the nav based on the direction the user scrolls, so even if they're at the bottom of the page, when they scroll up the nav gets revealed which is a nice effect: 

See the Pen qBawMGb by GreenSock (@GreenSock) on CodePen

 

I hope that helps!