I’m wanting to bring this page into Webflow, the UX ask is
Based on a list of keywords in the form of a tag button, if the user clicks on a word, can it filter to only show the graphics below that match this variable.
this page will show you what I’m trying to get accomplished, what would the name for this be?
http://myntpartners.com/partners.html
thanks
Here is my public share link: LINK
(how to access public share link)
so the amazingly talented @sabanna has provided us with a solution to this, just found it here >
Thanks …aka Дякую Anna 
#googledIT
You are welcome 
And thanks for such kind words.
P.S. Google didn’t fail this time 
This got me curious. So I tried experimenting on it:
https://preview.webflow.com/preview/block-adjustment-test?preview=76e07a2a028697c80d58143678fa6f52
However I can’t think how to animate the other elements smoothly, so they can stack flawlessly like the example you provided.
Not sure if webflow has a feature for it I don’t know about. Please do share if anyone knows a way 
Hey, @ceefor
In the example that @LvnLife shows at his first post here he uses Isotop jQuery plugin. Unfortunately, you can’t get this kind of animation by using the method I described in that tutorial.
But if you need filtering functionality, you can use another tutorial of mine:
[TUTORIAL] Using Isotope and MixItUp plugins with Webflow - Webflow Tips - Forum | Webflow
Cheers,
Anna
@sabanna In the example I’ve linked and learning from by Cloning it and going in under the hood… there is no Custom Code correct?
Where-as the latest link to another way to do it with more fluid animations If i understand it correctly is needing .js code that you link to… is this correct?
Hi @sabanna
Yes, I know the custom coded page is using its own code, but for the one you did in Webflow, do we need to use any custom code or does it just magically work within the webflow code [ this project will be hosted ]
That tutorial DOES NOT use any custom code
hi @sabanna - just wondering if i can borrow that smart brain of yours…
I’m trying to mimic all the goodness you did, but its doesn’t seem to be working…
Two things
and #2
Because my page has soo many elements, the positioning of each element where it sits on the page probably wont work, is there any tips or code click hack’s you can throw my way on how to have them appear one after the other much like on the appear and stack to the top found on this page > http://myntpartners.com/partners.html
thxs for any help you can offer up S
p.s Here is the webflow shared link if you want to take a peek > https://preview.webflow.com/preview/mynt?preview=fbe18cf5ac549e6b5fdf56a00d24ffba
Hello, @LvnLife
The reason why you can’t pick the particular classes in the interaction is because interactions work ONLY with Global Classes. In your case, class “filter-button” is a Global and all others “f-btn-…” are Combo classes
When you first give the class to the object it becomes a Global Class. When you add one more class to the object that already has one it becomes a Combo Class. So you will need to add some div to the page and one-by-one give that div class names “f-btn-…” (apply class >>> save >>> remove class >>> apply next class >>> save>>> remove class >>> …). It will create all the same name classes but on Global level and they will become available inside the interactions.
If you mean that you want to have same visual effect as it is on the example - only javaScript / jQuesry plugin can help you. If that visual transition effect is not required, all interactions that I used in the tutorial should make it work correctly.
Cheers,
Anna
Sabrina
I got it working, thanks for your help. Now I just need to explore how to properly stack them one after the other or do something that makes it more visually clean.
http://mynt.webflow.io/partners
For those who run into the same issue, here’s my laymens terms of getting this done from a non-coder, visual designer brain work flow.
Before you ATTACH a class name onto the element, you need to first create a DUMMY Div and name it the same name you want to attach to a selective element / object. You do this by Dragging a Div class anyone on the page, then go into the class text field and name it… then delete the Div and start all over again. Once you’ve named all the classes, you can then go attach them to the element / object you want them associated with. Best metaphor I can give you is, imagine you have a class theater event, you go put the parents names on the seat, then the parents show up and they know where to go sit, sorry, but its the best I can muster up here… Family NameTag on the seat before the doors open for event! #applause2SabannaANDanna
If you have many like I did, you may want to start testing after your first one or two to make sure you’re doing it right.
good Luck
@sabanna quick Q: How do I set the current state for when a user clicks one of the filtering buttons? and if the user clicks on another word / button, it will change that state back to its NORMAL red color. On State currently is DARKER red.
I’m sure it’s something so simple, but for the life of me, I can’t find it ;(
Hello, @LvnLife.
With this kind of filtering there is no way to apply “Current” state to the buttons and use it for change color of it. But you can do this by using interactions:
Cheers,
Anna
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
