robroy Posted July 2, 2020 Share Posted July 2, 2020 Hi, I'm new to gsap and would like to create a normal sticky nav menu with few animations which changes classes on scroll up or down. This is what I am trying to achieve: If you scroll down the menu stays at the top "hidden" but if the user scrolls up a bit the menu should get "sticky visible" and if he continuous to scroll down again "hidden" again. I just can't get this to work with the toggleActions and toggleClass 🙈 Thanks, See the Pen vYLpgGY by linkslegend (@linkslegend) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 2, 2020 Share Posted July 2, 2020 Hey Rob and welcome to the GreenSock forums! We made something like this before. It might be a good start for you: See the Pen mdVyPvK by GreenSock (@GreenSock) on CodePen 4 Link to comment Share on other sites More sharing options...
robroy Posted July 3, 2020 Author Share Posted July 3, 2020 Hi! Thanks for the example! So I added this and it's working now! Or is there a better way to do this? Sorry im new to this onUpdate: self => { console.log("progress:", self.progress.toFixed(3), "direction:", self.direction); let { direction } = self; const featureBoxes = document.querySelectorAll('.main-menu'); if (direction == -1) { featureBoxes[0].classList.add('is-sticky') featureBoxes[0].classList.remove('is-hidden') } else if (direction == 1) { featureBoxes[0].classList.add('is-hidden') featureBoxes[0].classList.remove('is-sticky') } } Thanks! Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 3, 2020 Share Posted July 3, 2020 57 minutes ago, robroy said: I added this and it's working now! Or is there a better way to do this? Why not use the approach that is used in the demo above? All of what you have there is exactly what toggleClass does for you... Link to comment Share on other sites More sharing options...
robroy Posted July 3, 2020 Author Share Posted July 3, 2020 I somehow don't get how to add and remove 2 classes classes like I did it with the code i'm using now 😕 Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 3, 2020 Share Posted July 3, 2020 Yes, you'd have to either rework your classes to only need one or use two ScrollTriggers. Link to comment Share on other sites More sharing options...
weddje Posted November 12, 2020 Share Posted November 12, 2020 Hi Zach, thanks for this nice navbar code! If I want to make the navbar unstick after scrolling down 300px, do I create an extra scrolltrigger for that? example here: https://facultydept.com/esteban-del-rio thank you, joost Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 12, 2020 Share Posted November 12, 2020 Hey weddje and welcome to the GreenSock forums. 5 hours ago, weddje said: If I want to make the navbar unstick after scrolling down 300px, do I create an extra scrolltrigger for that? Sure, that's a good option. There are multiple ways of setting it up. 1 Link to comment Share on other sites More sharing options...
weddje Posted November 12, 2020 Share Posted November 12, 2020 Hi Zach, I've added a second trigger, but this one is not triggering: ScrollTrigger.create({ start: 'top -50', end: 99999, toggleClass: {className: 'jwpnavbar--scrolled', targets: '.jwpnavbar'} }); gsap.from(".jwpnavbar--scrolled", { position:"absolute", scrollTrigger: { trigger:".jwpnavbar--scrolled", start: 'top -300', end: 99999, } }) See the Pen BazvJwZ by weddje (@weddje) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 12, 2020 Share Posted November 12, 2020 position isn't an animatable property. I think you want something like this instead? See the Pen dyXwKNW?editors=0010 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
weddje Posted November 12, 2020 Share Posted November 12, 2020 awesome!! works perfect. thank you so much Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now