Finsweet's attributes Override
I have created a custom navbar and I am using Finsweet's attribute to disable scrolling on when my navbar opens so, I have used "fs-scrolldisable-element = toggle" , So it enables and disables the scrolling when I click on my nav-menu icon. The issue is when I click on my nav links , I animate back to the section where the nav link is connected to but here now my scroll is disabled due that toggle which I applied, which means that I need to click on the nav menu icon to enable the scrolling. Tried the option of "preserve scroll" but it did not work. Can somebody help me in this case?
63 Replies
Hey @Sushant Dhiwar , instead of using the toggle scroll attribute, you could use the one for 'when visible' and apply it to your open nav, that way when the options are visible the scroll is disabled
If you're using a webflow navbar component you could also use the 'smart nav' options of disable scroll!
If you need some more help with this send me a read-only link and I'll try to point you in the right direction π
Hey @AtomicZBRA Thank you for answering my query. I used when visible attribute but it's not working, and as I have created custom navbar, the smart nav also doesn't work.
Here is the read-only link: https://preview.webflow.com/preview/new-portfolio1?utm_medium=preview_link&utm_source=designer&utm_content=new-portfolio1&preview=55ed881f63c6a4db8644a27404b8d53d&workflow=preview
So when you click to open the menu, the nav_menu becomes visible right? and that's when you want to disable scroll?
Also, do you have the live or staging link as well?
From tab - mobile breakpoints, When I click on the nav menu icon, the nav menu opens there I want to disable the scroll
Sure! https://new-portfolio1.webflow.io/
So, I applied toggle to the nav_menu icon so that when it is first clicked it opens and then closes when the nav_menu icon is closed.
But I when I click on the say services, I am able to go to the services section but the scroll is disabled due to the toggle!
Okay I've taken another look at it, you should be able to use the when-visible fine, but it's not working because there's a small error in the animation for it
you have the nav_menu set to display none on your page which is correct, but in the animation for your menu, you have the initial state for the nav_menu set to display: flex
Your initial state needs to be display none so that the when visible scroll disable knows when to trigger
you can set it up like this so it doesn't break your current animation
Okay, so I will make it none in the initial state and then make the display to flex.
the first one is set to display none, the second one is set to display flex
yeah lets try that and see if it fixes it!
also add a display none to the end of your second click animation to close the menu so it can reset
after that, put the fs-scrolldisable-element="when-visible" on the nav_menu element, and remove the toggle attribute
Okay, let me try this. and also as I have set the interaction to the nav_menu icon for the second click, so when I click on my nav link , I have to click twice on the nav menu icon to initiate it from the start. How to debug this
You can use this attribute: https://finsweet.com/attributes/mirror-click-events
Basically it will mirror clicks, so you add the target to the menu icon, and then the same trigger attribute to each of the nav links, that way when you click a nav link it clicks the nav menu to close it as well
Mirror Click Events - Mirror a click from one element to another
Mirror a click event from one Webflow element to another element. Replicate user clicks on other elements on the page
Okay, I will look into this, Thanks alot for helpinggg!!
No problem, hopefully it helps! Let me know how it goes, site looks great so far π
Thank you so much @AtomicZBRA !!
If you're wondering why the page isn't scrolling now, it's because you also have when_visible active on your Contact_form but it's displaying as block by default on page load as well
(still looking haha)
How when-visible works is when it's display: none; not just off the page
Hey, so do I have make it display: none?
Which is your animation for the contact appear? you have to have an initial state as display none in it like we did with the nav menu
I have used finsweet's modal for it
hmm, so it's not an animation, its just the modal open and close?
Yes!
let me look, give me a couple minutes
Suree
Okay, sorry to disturb you all again! I have done this step. and it solves the first problem of disable when in view. Still when I close the nav, it does not let me scroll. Can you guide me once again how can I use the mirror clicks?
It's disabling because the contact menu is still viewable
can you try taking the fs-scrolldisable="when-visible" off of the Contact_form element
Yes just did! but it's still is disabling the scroll!
Also, I understood this part. So I applied an direct animation to my nav link to hide the nav_menu when the nav_link is clicked and made it the "Trigger" and the nav_menu icon as "Target"
But idk why it's not working.
:('
do you also have scroll disable anywhere else?
I have also added lenis-smooth scroll , does it affect the scrolling?
i'm not sure, there's also scroll disable on the intro animation i think
Yes, for intro animation it's there.
Just removed that as well
Alright i'm looking at this but just on a call so in like 30 mintues i can give it my full attention
Sure sure! No worries.
Now, https://new-portfolio1.webflow.io/ when I click on the nav link , it is closing my nav_menu and scrolling is also enabled. Only thing now is that the mirror effect is not taking place.
Okay I'm back, jumping back in now π
you need to have the mirror click target on the nav_menu-icon
Hey, I have done that.
target set to the nav_menu-icon
hmm okay, and it's still doing the double click right
Yesss
Okay try taking out the mirror click elements, and put this custom code in the before </body> section
anddd it worked!!!
Boom!
that code just does the mirrored clicks a different way
Yes, I somehow understood.
Thank you mate! I mean it is my personal website and was not for any client, still you helped me to crack it. Really appreciate your kindness and the genuine help! π
Happy to help π ! Portfolio is looking good, hope it helps you showcase your work!
Thank you! See you in some other debug chat. HAHA
I'll be here π
Hey @AtomicZBRA , Everything works well, just one thing that is when I close my nav_menu there is a slight delay when the scroll is enabled again. On the second click on nav_menu icon I have set the nav_menu to hide after 0.4 secs delay but it takes a bit longer idl why.
That's kinda weird, when I close the menu i can scroll almost right away!
Is it? Then it must be something from my end, let me see.
Apart from this, can I get help in this particular case? Assuming it is a slider, how exactly can I implement this section in webflow? also, the right wrapper with content + the BG. we can do it by using swiper.js but I am stuck as how to implement the layout so that it doesn't break!
I'm kind of curious how this slider actually works functionally, from the image I can kind of assume:
1. The bar on the left moves down based on the slide
2. The content on the left changes per slide
3. The numbers on the right change as you scroll through the slides
4. The content on the right changes as well? (Does this content move differently from the content on the left?
So when we scroll through the page, the scrollbar is moving and the cards are moving along with it and also the number changes .
But the right wrapper with the content and the highlight, I gave the it's parent - children perspective and moved the div accordingly but it is breaking, any other method that I can try?
Do you have a link to the page where it alerady exists?
You could set it up in a big scroll animation in webflow instead of a slider so have a section thats like 300vh, and have the content container be sticky to the top of the container, and then animate everything inside the sticky container. But i might not be understanding it 100%
Sure, I will give it a shot!
@AtomicZBRA In this particular design they are these small and big cutouts - What I did is export them as img, wrapped those in a div and made the div absoulte to the respective positions! is this the correct way?
If itβs working for you, I think itβs a correct way!
Okayy thanks π
@AtomicZBRA So, the scrollbar moves down when the user scrolls through the section and the cards on the right wrapper also slides the left content remains intact. What can be the simplest way to achieve this?
I used Swiper JS and made the slider but not able to exactly achieve the scollbar π
Can you share the read-only link and the staging link so I could take a look at it?
Okay this is just a really quick rough demo about how I'd approach a section like this, I did it in the read-only and I was running on a small monitor so don't copy this exactly but just this is the idea I was going for!
part 1 : https://www.loom.com/share/8d89901f070a426481dc1fa15627c5ff?sid=6f4881ab-c79a-48ce-acff-23dc7d91e223
part 2: https://www.loom.com/share/1d8f13509ae64b8fb31654db5e9616dc?sid=c75c9e20-6a04-4f5b-9a0d-4391cba585ef
Hey, thank you for attempting it! so, you'd go with the animations to make it work, I will try that too and see if it works. Once again thank you! π
If thatβs the effect youβre going for then yeah, this would be a simple way to do it I think π
So, if we use animations, we are changing the text color of the navigation numbers, as I have used swiper.js for them to change individually also, will it be an issue when I just change the slider through the navigation ?
Hey @AtomicZBRA , I was able to achieve the layout but the only thing is the scrollbar is vertical and therefore the content is sliding vertical, I just want to know if I can control the scrollbar on scroll. π https://preview.webflow.com/preview/cyber-nx?utm_medium=preview_link&utm_source=designer&utm_content=cyber-nx&preview=1dd3024d32dce1231f1b096e602ba2c4&pageId=65deecb71b5f71a41c50f248&locale=en&workflow=preview
Gotcha, alright well looks really cool! π
Hey @AtomicZBRA thanks π but I just wanted to know if I can control the scrollbar on scroll? I added the animation and the scrollbar is scrolling but the slides are not changing
https://gsap.com/community/forums/topic/38060-swiper-slide-change-on-scroll-using-scroll-trigger-with-pin/
You can try out some of the solution they mention in this thread but itβs kinda hard because youβre wanting to scroll but not scroll the page or content
GreenSock
swiper slide change on scroll using scroll trigger with pin
hi there I'm building swiper slider and I need to change it's slides when I scroll. the thing is I need to pin swiper section and unpin it when slider reaches the end. maybe somebody could give me an idea of how I can do this with the help of gsap, if I can. See the Pen BavyNPJ by vyazemskaya (@v...
Okay okay let me see that! Thank you π
Hey @AtomicZBRA Sorry to disturbing you a lot π . How will you implement this section in webflow?
https://preview.webflow.com/preview/cyber-nx?utm_medium=preview_link&utm_source=designer&utm_content=cyber-nx&preview=1dd3024d32dce1231f1b096e602ba2c4&pageId=65e1997dbdcce39e60949e88&locale=en&workflow=preview I did it this way, let me know if it's a good fir (only desktop)