Streaming live at 10am (PST)

Is this possible with Webflow?


#1

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?


#2

Takes some intense work but is possible:


#3

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

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


#4

Hi Sabanna,

So how is this done in Webflow?


#5

@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


#6

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


#7

Well, your triangles effect is amazing too wink


#8

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?


#9

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


#10

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.


#11

This is definitely doable. I've done something similar for a client with the help of @bartekkustra code ninja skills. Take a look, http://cad.webflow.io/brands He also can create a sorting option I'm sure.


#12

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


#13

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.


#14

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


#15

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


#16

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


#17

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.


#18

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.


#19

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