Need solution - navbar animation on scroll

[csisz_zsolt]

Hello there! I am new to GSAP and I want to animate a navbar to shrink whenever the user scrolls down and grow  when the viewport is back at the top.

So far, I have been trying ScrollTrigger to achieve this, and it works completely fine until I refresh the webpage on the middle. Since it does not scroll back to the top on refresh, the new viewport will be somewhere down on the page and not the top of the window and so my animation will not work perfectly in every situation.

I am attaching some screenshots to show you what I mean exactly...

 

 

And then after refreshing the page this happens:

 

 

Is there a way to set the animation start to the top of the window (always)? 

Currently my code looks like this:

 

gsap.registerPlugin(ScrollTrigger);
gsap.registerPlugin(CSSRulePlugin);

gsap.to(".custom-logo-link", {
    scrollTrigger: {
    trigger: ".navbar",
    start: "bottom 150",
    markers: true,
    toggleActions: "play none none reverse"
  },
  height: "50px",
  duration: 0.2
});

gsap.to(".navbar", {
  scrollTrigger: {
  trigger: ".navbar",
  start: "bottom 150",
  markers: false,
  toggleActions: "play none none reverse"
},
backgroundColor: "white",
duration: 0.1,
boxShadow:"0px 6px 25px -7px rgba(0,0,0,0.32)"
});

Any idea would be appreciated!

 

Solution: The trigger element was a sticky navbar  So I set the trigger element to a fixed element like that stripe with the phone number. 

Edited July 24, 2020 by csisz_zsolt
Solution found

[ZachSaucier]

Hey csisz_zsolt and welcome to the GreenSock forums. 

 

I'm glad you got your issue fixed! That was going to be my guess but without seeing a demo or at least the relevant CSS it'd be impossible to say for sure. 

 

Small note: You can combine your .registerPlugin()s into one if you'd like:

gsap.registerPlugin(ScrollTrigger, CSSRulePlugin);

 

I'm curious: Why do you need CSSRulePlugin? In general it's best to animate CSS variables so long as you don't need IE support.