Streaming live at 10am (PST)

Tools for recreating this mechanic in Webflow?

#1

Hi all,

I’m looking to re-create a site mechanic in Webflow, and wondering how viable is it to create this mechanic.
A) An explorer-style treeview menu (in a pane on the left)
B) It can accommodate hundreds of nodes, with children nested 10+ deep.
C) Is easy to edit.
C) Opens corresponding accordion blocks in the article pane on the right.

So the question is:

  1. Is this viable in Webflow?
  2. If viable, what are the main tools/resources that I need? (And are there any important Tutorial videos I should put on my checklist?)

This link/site demonstrates the mechanic: https://beliefmap.org/god-exists#universe-began

Huge thanks in advance!

#2

You could try using an accordion interaction like this:

Hope this helps :slight_smile:

1 Like
#3

Hi there! Thanks, yes that is helpful. I added a few details in the OP. Do you think these together are viably created in Webflow?

1 Like
#4

(Ha, btw, I’m incidentally watching one of your YouTube videos right now. I was like, "Heyyyy… this guy on the video looks a lot like the avatar of the guy who responded to my Forum Q. *strokes chin. Good stuff!)

2 Likes
#5

thanks for watching :slight_smile:

As for your new details, yes. You can set the link to go to a certain section on the page all while opening an accordion. This might be a good thing to cover in a future live stream.

2 Likes
#6

That would be awesome! Can I bother you with one more question, since you’re obviously in the know. :slight_smile:

I’m about to invest months of time in either recreating that whole BeliefMap site in either Webflow or Craft. It sounds like you’re thinking I can recreate it in Webflow. Right? So I may pull the trigger. Just to confirm though, is there anything you see in the site’s working that would be particularly difficult to recreate in Webflow? Do you see the exact recreation of BeliefMap in Webflow as a good/sensible choice? (E.g. see beliefmap.org/god-exists/ to play around for a second) Thanks so much!

#7

Obviously my answer is biased since I work for Webflow, but yes. You can create that page in Webflow.

#8

Heh, ok, well, let me throw this alternative version of the question then:
Q1) What do you think will be the most uniquely challenging part of creating/managing a treeview with 1,000+ nodes, with some being 10+ deep?

As sub questions:
Q2) If I wanted to make changes to all nodes (e.g. all parent nodes), is there a way to target all of them and (for example) change a style/action etc. for all simultaneously?
Q3) What would this tree look like on my designer side, as I go to add more child nodes? Would I be able to open the tree up to where I want, insert a new child node, and collapse it back… or alternatively on the designer side would the whole thing always be open?
Q4) From what you know about the mechanics of webflow, would a tree being built like this be relatively slow, either on the designer side or the visitors side?

Finally, how could I convince you to make a video on doing this. :stuck_out_tongue:

Thanks!

#9

Hey PixelGeek, checking with you on this again. When you get a chance! Thanks.

#10

Q1) What do you think will be the most uniquely challenging part of creating/managing a treeview with 1,000+ nodes, with some being 10+ deep?

you might want to try using webflow collections to help manage all of this data. But remember, you can only have up to 20 collection lists per page.

Q2) If I wanted to make changes to all nodes (e.g. all parent nodes), is there a way to target all of them and (for example) change a style/action etc. for all simultaneously?

with custom code, yes. with interactions, it depends if you are using the same class and structure with all elements.

Q3) What would this tree look like on my designer side, as I go to add more child nodes? Would I be able to open the tree up to where I want, insert a new child node, and collapse it back… or alternatively on the designer side would the whole thing always be open?

you can open them with the display:block then hide them again with display:none

Q4) From what you know about the mechanics of webflow, would a tree being built like this be relatively slow, either on the designer side or the visitors side?

the performance should be fast :slight_smile:

hope this helps