Jump to content
GreenSock

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

Need solution - navbar animation on scroll

Recommended Posts

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...

 

image.thumb.png.b35fb5abee35f312ac108d8b06832317.pngimage.thumb.png.4f9790f28347f3ee598893360b30ec6f.png

 

And then after refreshing the page this happens:

 

image.thumb.png.4ea0bc89af8a8ed82351a3b519beae5f.png

 

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 by csisz_zsolt
Solution found
  • Like 1
Link to post
Share on other sites

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.

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

×