Streaming live at 10am (PST)

Show content based on filter / keyword tag user clicks on


#1

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)


#2

so the amazingly talented @sabanna has provided us with a solution to this, just found it here >

Thanks ...aka Дякую Anna :wink: #googledIT


#3

You are welcome :slightly_smiling: And thanks for such kind words.

P.S. Google didn't fail this time :smiley:


#4

@LvnLife,

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 :slightly_smiling:


#5

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:
http://forum.webflow.com/t/tutorial-using-isotope-and-mixitup-plugins-with-webflow/18461

Cheers,
Anna


#6

Hi @sabanna,

Thanks! Will take a look at it :slightly_smiling: Awesome stuff!


#7

@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?


#8

There is js file connected to the site and "data-filter" properties on the buttons


#9

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 ]


#10

That tutorial DOES NOT use any custom code :slightly_smiling:


#11

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
1. It's as if the second click won't allow me to choose the class name I've given to an object
f-magento won't come up when I try to type it inside the 'Affect different elements'

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 :wink:

p.s Here is the webflow shared link if you want to take a peek > https://preview.webflow.com/preview/mynt?preview=fbe18cf5ac549e6b5fdf56a00d24ffba


#12

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


#13

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 :wink:

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 :wink:


#14

@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 ;(


#15

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:
1) Add a div to button and give it a color that you want your button have when it used. I would call it "active layer"
2) Make this layer position: absolute and make sure it is not covering any content in the button.
3) Make "active layer" transparent initially.
4) Add animation steps with Click triggers to you filtering interactions:
a) First click trigger - all "active layers" goes to opacity=0% (only first click!)
2) Second click trigger - only nested "active layer" goes to opacity=100% (only first click!)

Cheers,
Anna


#16

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.