How to on Webflow: Create a filterable portfolio with JavaScript

Описание: I am currently building new features on my website inside of Webflow. One of the features I wanted was a filterable case-study or portfolio section as I am planning to put a lot of new work in this section. This way, the user can easily search for the type of projects they are interested in seeing.

With Webflow native elements I couldn't find a way to do this, unless I sent the user to a collection page with the individual categories. But for me, I wanted the user to remain on the same page.

So, with a little bit of Javascript (JS) and a code that has already been written for us by the team at FinSweet, I was able to do this in just about 3 to 5 mins!

In this video I am showing how to find the FinSweet hacks, and implement them inside of your Webflow website to create a filterable option that you can use to filter case-studies, blog posts and much more!

If you are from the FinSweet team, thank you on behalf of the Webflow world!

Webflow hacks by Finsweet: https://www.finsweet.com/webflow-hacks

Video timeline:
0:00 Video intro
0:30 What we will be doing
1:50 Example of how it works
2:40 Top secret home page with case studies
3:44 FinSweet clonable hack project
4:27 Copying the JS code
4:54 Using it in your Webflow Website
5:31 Changing the CSS classes
6:00 See it work!


THE MUSIC IN ALL MY VIDEOS:
Epidemic Sounds - https://bit.ly/3fINEZi​​​​​​ | Great music for those doing Youtube Videos
Elements by Evanto - https://elements.envato.com/user/Tony....
Item Title: Tutorial Tech
Item URL: https://elements.envato.com/tutorial-...
Item ID: B3KYEPN
Author Username: LuckyBlackCat
Licensee: Leopoldo Pirela

FOLLOW ME AROUND THE WEB:
Website: https://www.leopoldopirela.com​​​​​​
Instagram:   / designs.by​.....  .
Facebook:   / designs.by.l....  .
IG: @designs.by.leopoldo