I was hoping one of you good wise people might be able to help a man out.
Would anyone know how to reduce the time for the fade out animation on the Staff bio divs I have here, it’s set to zero delay in mouse over but still takes a second to fade away. The client is asking for it to be faster.
And just another thing if that’s OK. In the Our Clients page, I have a CMS collection, and had to use a 3rd party widget to enable category sorting. This widget is rediculously expensive, is there a free way or method to create customisable CMS filtering buttons like the ones I have on this page.
Also, would anyone have any general advice for finding free customisable email subscription widgets. I’m currently using a 3rd party widget, but that costs the client. Are there any other options if anyone knows off the top of their head?
Sorry to throw all those questions in there, they’re all relevant to this site build and I can’t great solutions online.
Since your currently using one of the default “Appear & Disappear” animations, the best way to have more control would be to set up a custom animation — this will allow you to modify the easing and timing of both the fade-in and fade-out:
I always recommend Finsweet Attributes when folks need additional Webflow functionality — so I suggest you look into using their CMS Filter solution:
If you’re not familiar, these work by looking at specific data attributes you add and work natively with all the Webflow Designer styling. They have a bunch of different Attribute solutions and each offer so much great functionality — with nearly all of them being offered for free. Such an awesome set of tools that I can’t recommend enough
I’m not quite sure what you mean by “email subscription widgets” — are you talking about a signup form? If so, most email marketing platforms allow you to embed their signup form for free with some even playing nicely with the native Webflow forms with you only needing to update the form action URL.
Depending on the number of contacts in their marketing list, they may need to pay a fee to use the email marketing platform but I believe most options provide a limited free plan.
Thank you so much for your considered response, and my apologies for my late reply. I appreciate you looking into this.
With regard to the CMS filtering, I checked out that link you have. There doesn’t seem to be much info on the setup, I see code there but unsure where to add the code to get the functionality I’m after. Would you happen to know if there is a guide or what is the common set up practice for such funtionality.
I love Webflow but I do find it odd that there is a native CMS functionality, but no native filtering of CMS lists, seems like a very basic thing to have.
There is a bit of information down the page a bit (linked below) that goes over setup:
Essentially the setup is just adding the code that’s on Step 1 to your page, then adding the attributes to various native Webflow elements. If you learn better by watching videos, YouTube’s got a bunch of walkthroughs (with most of them being pretty in-depth), but I found a 4min “quick” tutorial below that may help:
I love Webflow but I do find it odd that there is a native CMS functionality, but no native filtering of CMS lists, seems like a very basic thing to have.
Agreed — it is a bit strange but once you learn Finsweet’s filter solution (and then most likely the rest of their offerings) you’ll find that you won’t miss a native solution too much. Their solutions are nearly native since you work directly with native Webflow elements.
I’ve set up the attributes, but for now I can’t seem to get either the buttons or the text blocks to filter the Collections list. I’ve set the attributes but I fear I’m missing something obvious.
If you check the link below you’ll the site as it is now, with a CMS filter with the 3rd party plugin. If you check the sections, you’ll see a hidden section there called FORM FILTER HIDDEN.
If you check in there you’ll see the CMS collection and my attempt at some buttons, or even just div blocks with text blocks inside. I can’t quite get anything to filter, you may see something obvious.
I’m trying to replicate the 3rd party plugin, the page opens on ALL SECTORS in default showing the unfiltered lists, clicking the other sectors filters, and clicking ALL SECTORS clears the filtering. I was hoping to use the buttons to style the hover animations like in the 3rd party plugin.
Thanks again for you help, this is just one last issue on this site that’s stopping me from publishing, so this is a real help.
I’m not sure if you’re testing the functionality in the Designer, but custom scripts don’t run in that environment — you’ll need to make sure everything’s working on the published site:
When you click into that page what you’re seeing is the 3rd party categories sorting, so at first glance everything seems fine. But that 3rd party script is 40 USD dollars a month, which is a price the client won’t and shouldn’t pay.
If you check the sections you’ll see a hidden section where I’m trying to implement the solutions given in this thread. If you view that you’ll see the problem I’m facing, which definitely doesn’t work in a published environment. I’m trying to emulate the working categories you see when you go onto the page, but just using the free script given in this thread.
I hope that makes sense, and once again thank you for engaging with me to resolve this solution.
This is the perfect situation to take advantage of Finsweet’s Automated Support Service:
This integrated tool is used to diagnose setup issues on any webflow.io domain by adding a bit of text (“?fs-attributes-support=true”) to the end of your URL. It will reload the page with an overlay that will analyze the attributes, make sure you’ve set things up correctly, and (if needed) give you steps to fix any issues.
I ran it myself really quickly and saw that there are some issues on the page that are causing the filter issue:
The Automated Support is showing that there is a duplicated fs-cmsfilter-element="list" attribute on the page and you haven’t assigned a field identifier:
The latter is an attribute added to the filter button as well as a text string within the item you want to filter so it knows which item should be shown for each button. So for example, you’d add a fs-cmsfilter-field="sectors" to your “Life Sciences” button and then add the same fs-cmsfilter-field="sectors" attribute to a text block containing the words “Life Sciences” on the CMS item.
It’s worth noting that right now you’re using a bunch of links to filter your CMS items (as this is what Jetboost allows) but for the Finsweet option you should be using a form element. This is not only required for the actual solution to function, but also follows best practices when it comes to accessibility. There’s a great writeup that Finsweet provided if you’re curious below:
I’d recommend duplicating the Finsweet filter setup to another page without the Jetboost option, unhiding it, and walking through the steps to fix the issues listed above. Having two separate tools referencing the same filtered list can add variables that may lead to bugs or unexpected behavior.
Thank you so much for this, although I’m still struggling to get it working. It was on another part of Finsweet’s site that it says that these solutions only work for webflow.io domains, not custom domains. Would I be right to assume that Webflow has no free CMS filtering options?
Finsweet Attributes work for both staging (webflow.io) and published domains — most of the client sites I build use one or more of them — and the vast majority are free (the CMS filers are one of those).
What issue are you running into? The automated support should help you diagnose any of the issues but I’m happy to help if you’re running into something not mentioned with that tool.
