Is this possible with Webflow?

I want to recreate the interaction that is seen on this page.

In particular, when you click on the filter tab under the title and choose a category, I would love to be able to recreate the way the circles move into order. Is it possible to achieve this with Webflow?

Takes some intense work but is possible:
http://forum.webflow.com/t/using-a-filter-jquery-function-to-filter-images/1479?u=waldo_broodryk

1 Like

And here is option how to do something like this without using JQuery :relaxed:

Here is an example : http://filtergallery.webflow.io/

1 Like

Hi Sabanna,

So how is this done in Webflow?

@sabanna Thatā€™s a super intense filter to build in webflow. Utilizing the heck out of that display:none and display:block css haha. :smile:

Hi @rajsidhu,

all this done by using different classes and interactions with that classes (hide, show). Full manual and links to demo and clone-able webflow project you can find in previous comment :smile:

Cheers,
Anna

1 Like

Well, your triangles effect is amazing too :wink:

Thanks.

In your example the squares zoom down and out and then zoom in when you select a category.

Can we get the squares to move like they do on this page?

I think it is possible (or at least something looks like that), just need to play around with interactions. ā€¦ Unfortunately, right now I have pretty taught schedule :pensive: and do not have much time. Will try to do this later this week, maybe. Or you can try by yourself. Experiments are always fun :wink:

Thanks for the reply Sabanna,

I have only just come across Webflow so Iā€™m not that good with it otherwise I would have a go myself. Right now I have no idea where to start with this.

Iā€™ll wait to see if you (or anyone else) can get some time and put something together, would be super helpful but I do understand your time constraints too.

This is definitely doable. Iā€™ve done something similar for a client with the help of @bartekkustra code ninja skills. Take a look, Manufacturer Directory - Canal Alarm Devices, Inc. He also can create a sorting option Iā€™m sure.

Hey @DFink, that page is sick! Is that all done through the tabs widget? Canā€™t think how else you got them to close when another is selected.

Good work,
Jamie

Hey, no itā€™s not tab widget ;) Itā€™s my custom code that made this happen ;) Itā€™s not only closing all items and show the new one but also ā€œmoveā€ to the new one :) It was a very fun project @DFink! Hopefuly weā€™ll be able to create something amazing together again.

1 Like

Ahhh very nice man! Did you use jQuery for that then? I love it, it works like the search on Google Images, really nice.

1 Like

Yeap, jQuery :) What else a ninja like me could use? :D

2 Likes

Can we integrate jquery plugins into our Webflow sites? If so this would solve my original question i think!

Yeap, you can do that by adding your custom jQuery library to the footer code in site dashboard ā†’ Custom Code. You can upload your scripts to dropbox account and link to them within Webflow.

Thanks @bartekkustra for your reply.

Iā€™m really sorry about this but I am not very good with code and stuff so donā€™t really understand how to fully implement jQuery as you described.

Is there a tutorial you can point me in the direction of?

Thanks in advance for your guidance.

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