Noodel.js

Noodel is based on the principle of breaking down large blocks of content into bite-sized chunks. A noode should never exceed the size of the viewport - a precondition for node-based navigation.

So when you swipe up and down, you are moving in the branch axis.

So when you swipe left and right, you are moving in the trunk axis.

Direct <script> embed

You can use Noodel by directly embedding its script and CSS into your HTML:

                        
                            // You should specify the version number (e.g noodel@2.3.0) in production
                            <script src="https://cdn.jsdelivr.net/npm/noodel/dist/noodel-full.umd.min.js"></script>
                            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noodel/dist/noodel.css">
                        
                    

Noodel is available via npm-linked CDNs such as jsdelivr and unpkg.

NPM

For more advanced projects that use bundlers, install from npm:

                        
                            npm install noodel
                        
                    

And import into your code:

                        
                            import Noodel from 'noodel'

                            // Don't forget to also include the CSS, e.g.
                            // import 'noodel/dist/noodel.css' 
                        
                    

Creating a noodel

Creating a noodel is very simple. The basic syntax is:

                        
                            // Creates a view model based on the given content tree
                            const noodel = new Noodel(contentTree);
                            
                            // Renders the view onto the page
                            noodel.mount("#target");
                        
                    

The contentTree parameter is an element selector or array of objects that specifies the content tree, and #target is the target element for placing the noodel.

Defining content tree via HTML

There are two ways to define the content tree that will be used by a noodel. For sites driven by static HTML templates, you can define the tree via HTML and give the container element to the constructor:

                        
                            <div id="noodel" style="display: none;">
                                <div class="noode">
                                    <p>My first noode</p>
                                </div>
                                <div class="noode">
                                    <p>My second noode</p>
                                    <div class="noode">
                                        <p>First child of my second noode</p>
                                    </div>
                                </div>
                            </div>

                            <script>
                                const noodel = new Noodel("#noodel");
                                noodel.mount("#noodel");
                            </script>
                        
                    

Defining content tree via object array

Alternatively, for dynamic sites/apps driven by JavaScript, you can specify the content tree as an array of objects corresponding to noodes on the first level:

                        
                            let tree = [
                                {
                                    content: "<p>My first noode</p>"
                                },
                                {
                                    content: "<p>My second noode</p>"
                                    children: [
                                        {
                                            content: "<p>First child of my second noode</p>"
                                        }
                                    ]
                                }
                            ];

                            const noodel = new Noodel(tree);
                            noodel.mount("#target");
                        
                    

Summary

Noodel uses Vue internally and therefore provides integration with Vue out of the box. Noodel is available as a Vue component, and also allows you to use Vue components as the content for individual noodes.

Using the base build

If you are including Noodel and Vue's scripts directly in your HTML, it is recommended you use Noodel's base ("Vue-less") build, alongside the Vue build used in your main project (Noodel requires Vue ^2.6.11). This prevents Vue from being included twice.

If you are using Noodel as a module from npm, the default entry is the base build and the bundler should be able to load Vue as a dependency.

Using Noodel's Vue component

Noodel's Vue component is exposed as a static variable on the Noodel class, which can be used like any other Vue components. It takes an instance of Noodel as its only prop.

                        
                            import Noodel from 'noodel';

                            const NoodelComponent = Noodel.VueComponent;
                            
                            const app = new Vue({
                                render: function(h) {
                                    return h(NoodelComponent, { 
                                        props: { 
                                            noodel: this.noodel 
                                        }
                                    });
                                },
                                data: {
                                    // the Noodel instance must be registered as reactive data
                                    noodel: new Noodel()
                                }
                            }).mount("#el");
                        
                    

Using Vue components as noode content

You can pass Vue components as noode content and they will be rendered via a <component :is="yourComponent"></component>. To do so, you need to provide an object as noode content:

                        
                            const noodel = new Noodel([
                                {
                                    content: {
                                        component: YourVueComponent, // your Vue component object or name
                                        props: { // name-value pairs of props to pass to this component
                                            "propA": "abc",
                                            "propB": 20
                                        },
                                        eventListeners: { // name-value pairs of event listeners to attach onto the component
                                            "onButtonClick": () => console.log("button click")
                                        }
                                    }
                                }
                            ]);
                        
                    

Options for the noodel

                        
                            // Set noodel options on init
                            const noodel = new Noodel(tree, {
                                visibleSubtreeDepth: 10,
                                swipeMultiplierTrunk: 0.9
                            });

                            // Change options dynamically on-the-fly
                            noodel.setOptions({
                                visibleSubtreeDepth: 5
                            });
                        
                    

Options for individual noodes

                        
                            // Set options at content tree creation
                            const noodel = new Noodel([
                                {
                                    content: "something cool",
                                    options: {
                                        onEnterFocus: () => console.log("entered a cool noode")
                                    }
                                }
                            ]);
                            
                            // Set options dynamically
                            noodel.getRoot().getChild(0).setOptions({
                                onExitFocus: () => console.log("exited a cool noode")
                            });
                        
                    

Specifying noode ID

By default, a unique ID will be generated for each noode, which will be used for various purposes. You can provide your own ID for noodes using a data attribute:

                        
                            <div class="noode" data-id="myCustomId">
                                ...
                            </div>
                        
                    

or in JavaScript:

                        
                            let noodeWithCustomId = {
                                id: "myCustomId",
                                content: "A special noode"
                            }
                        
                    

Specifying initial active child

By default, the initial active child for each noode is at index 0 (the first child). You can specify another child to be initially active by using:

                        
                            <div class="noode" data-active>
                                ...
                            </div>
                        
                    

or in JavaScript:

                        
                            let tree = [
                                {
                                    content: "First child"
                                },
                                {
                                    isActive: true, // this noode will be active instead
                                    content: "Second child"
                                },
                            ];
                        
                    

Specifying custom class/styles

You can specify custom class/styles on individual noodes that will be applied to their container elements. See styling your noodel for more information.

                        
                            <div class="noode" data-class="myClassA myClassB" data-style="color: green; max-width: 900px;">
                                ...
                            </div>
                        
                    

In JavaScript:

                        
                            let noodeWithCustomStyles = {
                                style: {
                                    color: "green",
                                    "max-width": "900px" 
                                },
                                className: [
                                    "myClassA",
                                    "myClassB"
                                ],
                                content: "A fancy noode"
                            }
                        
                    

Attach custom data

If you are using the object syntax, you can also associate custom data with each noode. This can be useful in advanced situations where you need to tag individual noodes with your own data:

                        
                            const noodel = new Noodel([
                                {
                                    id: "noodeWithCustomData",
                                    data: "sad"
                                }
                            ]);

                            // get/set the custom data
                            const noodeWithCustomData = noodel.findNoodeById("noodeWithCustomData");
                            const data = noodeWithCustomData.data; // "sad"
                            noodeWithCustomData.data = "happy";
                        
                    

Listening to events

You can attach listener callbacks for events by setting them in the noodel/noode options:

                        
                            const noodel = new Noodel([
                                {
                                    options: {
                                        // noode specific event
                                        onEnterFocus: () => console.log("entered focus")
                                    }
                                }
                            ], {
                                // noodel event
                                onMount: () => console.log("mounted")
                            });

                            // removes the listener by setting the option to null
                            noodel.setOptions({
                                onMount: null
                            });
                        
                    

Preventing navigation

By default, a noodel responds to four types of user input for navigation: swipe/drag, keyboard, scroll wheel, and tap. Navigation will occur even when such input originates from content elements inside noodes.

This behaviour can be undesirable in situations when you have UI elements that should capture those inputs and prevent them from causing navigation, for example a slider or a textbox.

Prevention classes

To address this issue, Noodel provides the following "prevention classes" that you can selectively apply to individual elements in your content:

• nd-prevent-swipe
• nd-prevent-key
• nd-prevent-wheel
• nd-prevent-tap

Noodel will ignore the input that originates from an element (or its descendents) with the corresponding prevention class and stops it from triggering any Noodel-specific behaviour.

                        
                            <div class="noode">
                                <input type="text" class="nd-prevent-swipe nd-prevent-key"></input>
                                <button class="nd-prevent-tap">Submit</button>
                            </div>
                        
                    

Caveat

You should use prevention classes sparingly, on elements that really need them. Having large blocks of content with navigation prevention can impact usability, especially on smaller screens.

For situations that require extensive navigation prevention, you should rely on the inspect mode instead. Alternatively, you can disable the corresponding input in Noodel's options and provide your own means of navigation via Noodel's API.

Summary

For swipe-based interfaces such as Noodel, there is always an unresolvable conflict between the swipe mechanism and native conveniences that depend on the same motion, such as text selection.

The inspect mode is the solution Noodel offers to address this issue. By default, text selection is disabled on a noodel and all input directed towards navigation. Once inspect mode is on, all navigation methods will be suspended and the user is free to select text or perform other conflicting interactions such as drag-and-drop on the focal noode.

It is recommended that you rely on inspect mode, in addition to prevention classes, to deal with situations where UI elements in your content conflict with Noodel's mechanism.

Inspect mode trigger

The default trigger for inspect mode is the double tap (on any area of the noodel), or the Enter key on a keyboard.

This trigger has be chosen for maximum convenience and device compatibility, but like anything else it does end up conflicting with interactions such as multiple clicks to select a word/line. If you wish to prevent the default trigger you can always disable it through Noodel's options and provide your own means of toggling inspect mode via Noodel's API (e.g a custom button).

Noode content overflow

As of Noodel V2, support for custom scrolling inside noodes has been dropped in favor of using the inspect mode to handle content overflow, which provides a more streamlined viewing experience. Scrolling inside noodes is disabled normally but enabled during inspect mode.

(This allows scrolling to be handled by the browser natively, which is a much better idea.)

The view model

The object you get when you create a noodel is its view model. It has 2-way binding with the view, and you can perform operations on it to change the view dynamically.

                        
                            // view model of whole noodel
                            const noodel = new Noodel(tree);

                            // view model of an individual noode
                            const currentFocalNoode = noodel.getFocalNoode();
                        
                    

Programmatic navigation

                        
                            const noodel = new Noodel(tree);
                            const specialNoode = noodel.findNoodeById("special");

                            // move to the next noode
                            noodel.moveForward();

                            // move 2 steps back towards ancestors
                            noodel.moveOut(2);

                            // move to the 3rd branch in the active tree
                            noodel.setFocalLevel(3);

                            // jump to a specific noode
                            specialNoode.jumpToFocus();
                        
                    

Replacing noode content

                        
                            const noodel = new Noodel([
                                {
                                    content: "old"
                                }
                            ]);

                            noodel.getRoot().getChild(0).setContent("new");
                        
                    

Noode insertion and deletion

                        
                            const rootNoode = new Noodel().getRoot();

                            // inserts a noode
                            rootNoode.addChild({
                                content: "Hello!"
                            });

                            // deletes the noode just added
                            rootNoode.removeChild(0);

                            // inserts multiple noodes and their descendents
                            rootNoode.addChildren([
                                {
                                    content: "Fruits!",
                                    children: [
                                        {
                                            content: "Tomatoes!"
                                        }
                                    ]
                                },
                                {
                                    content: "Vegetables!"
                                }
                            ]);
                        
                    

Changing noodel state between mounting

The noodel's view state is independent of its view. You can mutate it in between mounting and unmounting the view.

                        
                            const noodel = new Noodel();

                            noodel.getRoot().addChild({
                                content: "first child of root",
                                children: [
                                    {
                                        id: "grandChild",
                                        content: "first child of first child of root"
                                    }
                                ]
                            });

                            noodel.jumpTo(noodel.findNoodeById("grandChild"));

                            // the view will focus on the "grandChild" noode initially
                            noodel.mount("target");

                            // the view model is still focused on the same noode after unmount
                            noodel.unmount();
                        
                    

Summary

By default, routing is enabled for your noodel. This allows Noodel to control the hash of your URL to sync with the location of the current focal noode. It will use the ID of the focal noode as the fragment identifier.

This allows you to use the browser's history navigation to jump between noodes, as well as create URL links that target specific noodes in a noodel.

History push behavior

Currently, only explicit changes to the URL will cause a new entry to be pushed to the browser history. Noodel uses history.replaceState() to replace the URL hash as you navigate around the noodel normally to prevent creating too many unnecessary entries. This includes when you use Noodel's API to navigate.

Caveat

You should use routing on only one noodel per page (ideally, when you use a single noodel to control a site). Routing behaviour for multiple noodels on the same page is not well defined.

Due to the fact that Noodel does not use native scrolling, basic Ctrl+F search in browsers will not be able to jump to individual occurrences.

Please see noodel-search for a simple DOM based text search plugin for Noodel.

Summary

You can control most aspects of Noodel's appearance using plain CSS, by extending/overriding Noodel's CSS classes, or by setting custom class/styles for individual noodes.

In addition, you have complete freedom in structuring/styling the content inside your noodes.

Styling via Noodel's CSS classes

Noodel comes with a basic stylesheet that determines the layout, with a simple greyscale theme. You can extend/override most of Noodel's CSS classes to customize various visual features.

See CSS classes in the API section for the list of classes you can work with.

Styling via noode-specific class/styles

You can specify custom class/styles for each noode that will be applied to the nd-noode element. This is useful when you need to have different types of noodes (e.g large vs small) in the same tree.

See specifying custom class/styles for example.

Controlling noode size

The size of noodes are determined in a very simple way - they are placed in a normal block context, so will grow or shrink to fit their content while conforming to the size of siblings, with respect to any CSS height and width properties.

This means you can fully control the size of noodes by setting the height, width, max-height, max-width, min-height and min-width properties on the nd-noode class (or on custom class/styles you provide for individual noodes). You can have either fixed size noodes (by setting a specific width/height) or flexible size noodes (by not setting a specific width/height), and well as using max/min sizes to adapt to a range of situations. In addition, you can style your content and let them influence the size of their noode containers.

And whenever the size of a noode changes, Noodel will automatically align everything so your focal noode is always centered at the right position!

By default, noodes only come with a max-height: 600px and max-width: 800px that matches the default size of the canvas.

                            
                                .nd-canvas {
                                    height: 100vh;
                                    width: 100vw;
                                }

                                .nd-noode {
                                    height: 100vh;
                                    width: 100vw;
                                    margin: 0; /* Removes the "gap" between noodes */
                                }
                            
                        

Controlling animations

All animations are done via CSS transitions. This means you can control the duration and timing functions of all animations via CSS overrides of the corresponding classes.

See CSS classes in the API section for the list of classes you can work with.

Creates the view model of a noodel based on the given content tree.

• contentTree Initial content tree for the noodel. Can be an array of NoodeDefinition objects that specify noodes on the first level, an HTMLElement that contain templates for noodes on the first level, or a selector string for such an element. If nothing is provided, will create an empty noodel with just the root.
• options Global options for the noodel

Mounts the noodel's view at the target element, replacing it.

Destroys the noodel's view and removes it from the DOM, but keeping the current state of the view model.

Schedules a callback function to be called after Noodel's current DOM update cycle. Use this if you need to access DOM elements after performing an update.

Gets the container element of this noodel (i.e. nd-canvas), if mounted.

Gets the level of the current focal branch. The first branch has level 1.

Gets the height (total number of levels) in the current active tree.

Gets the number of noodes in this noodel (excluding the root).

Gets the root noode. The root is an invisible noode that serves as the parent of the topmost branch, and always exists.

Gets the parent noode of the current focal branch.

Gets the current focal noode.

Gets the noode at the given path, an array of 0-based indices starting from the root (e.g [0, 2] gets the 3rd child of the first child of the root). Returns null if no noode exists on that path.

Gets the noode with the given ID. Returns null if does not exist.

Changes the options of the noodel. Properties of the given object will be merged into the current options.

Navigates the noodel to focus on the branch at the given level of the current active tree. If the level is greater or smaller than the possible limits, will navigate to the furthest level in that direction.

Navigates towards the child branches of the current focal noode.

• levelCount number of levels to move, defaults to 1

Navigates towards the parent branches of the current focal noode.

• levelCount number of levels to move, defaults to 1

Navigates towards the next siblings of the current focal noode.

• noodeCount number of noodes to move, defaults to 1

Navigates towards the previous siblings of the current focal noode.

• noodeCount number of noodes to move, defaults to 1

Turns inspect mode on/off.

Custom data associated with this noode. You can freely get/set this property.

Returns true if this noode has been deleted from its noodel. Most operations on a deleted noode will throw an error.

Gets the parent of this noode. All noodes should have a parent except the root, which will return null.

Gets the previous sibling, or null if this is already the first.

Gets the next sibling, or null if this is already the last.

Gets the path (an array of zero-based indices counting from the root) of this noode.

Extracts the definition tree of this noode (including its descendents). Useful if you want to perform your own operations on the content tree.

Gets the container element of this noode (i.e. nd-noode-box), if mounted.

Gets the container element of the branch containing this noode's children (i.e. nd-branch-box), if it has children and is mounted.

Gets the child at the given index. Returns null if does not exist.

Gets a mapped array of this noode's list of children.

Gets the number of children of this noode.

Gets the ID of this noode.

Gets the content of this noode.

Gets the custom class names for this noode.

Gets the custom styles for this noode.

Gets the 0-based index (position among siblings) of this noode.

Gets the level of this noode. The root has level 0, the first branch has level 1, and so on.

Gets the active child index. Returns null if there's no active child.

Gets the current active child. Returns null if does not exist.

Returns true if this noode is the root.

Returns true if this noode is active.

Returns true if this noode is logically visible (i.e even when rendered beyond canvas boundary). Note that visibility may be delayed due to debounce effects.

Returns true if this noode's children is logically visible (i.e even when rendered beyond canvas boundary). Note that visibility may be delayed due to debounce effects.

Returns true if this noode is inside the focal branch.

Returns true if this noode is the parent of the focal branch.

Returns true if this noode is the focal noode.

Sets the ID of this noode.

Replaces the content of this noode.

Replaces the custom class names for this noode. Can be an array or a space-delimited string.

Replaces the custom inline styles for this noode. Can be a string or an object of property-value pairs.

Changes the options for this noode. Properties of the given object will be merged into the existing options.

Changes the active child of this noode. If doing so will toggle the visibility of the focal branch (i.e this noode is an ancestor of the focal branch), a jump to the new active child will be triggered.

Performs a navigational jump to focus on this noode. Cannot jump to the root.

Inserts a child noode (and its descendents) at the given index. Will always preserve the current active child. Returns the inserted child.

• childDef definition tree of the child
• index if not provided, will append to the end of the children

Inserts a list of child noodes (and their descendents) at the given index. Will always preserve the current active child. Returns the inserted children.

• childDefs definition trees of the children
• index if not provided, will append to the end of the children

Syntax sugar for adding sibling noode(s) before this noode.

• defs noode definitions to add

Syntax sugar for adding sibling noode(s) after this noode.

• defs noode definitions to add

Removes a child noode (and its descendents) at the given index. If the active child is removed, will set the next child active, unless the child is the last in the list, where the previous child will be set active. If the focal branch is deleted, will jump to the nearest ancestor branch. Returns the definition of the deleted noode.

Removes children noodes (and their descendents) at the given index. If the active child is removed, will set the next child active, unless the child is the last in the list, where the previous child will be set active. If the focal branch is deleted, will jump to the nearest ancestor branch. Returns the definitions of the deleted noodes.

• count number of children to remove, will adjust to maximum if greater than possible range

Syntax sugar for removing sibling noode(s) before this noode.

• count number of noodes to remove, will adjust to maximum if greater than possible range

Syntax sugar for removing sibling noode(s) after this noode.

• count number of noodes to remove, will adjust to maximum if greater than possible range

Syntax sugar for removing this noode from the tree.

Do a preorder traversal of this noode's subtree and perform the specified action on each descendent.

• func the action to perform
• includeSelf whether to include this noode in the traversal

ID of this noode. If provided, must be unique and should NOT start with "_" .

Children noodes of this noode. Defaults to an empty array.

If provided, will mark this noode as active, overriding the default (first child). If multiple siblings are marked as active, only the first one will take effect.

Content of this noode. If is a string, will be inserted as innerHTML of the nd-noode element. Can also be a ComponentContent object that wraps a Vue component.

Custom class(es) for this noode. Either a string of class names delimited by spaces or an array.

Custom styles for this noode. Either a string in inline style format or an object in {"property": "value"} format.

Options for this noode.

Custom data to associate with this noode.

The number of levels of descendent branches to show after the current focal branch. Defaults to 1.

If true, will keep the current branch depth (if possible) when tapping on the sibling of an ancestor. Useful to create an effect similar to conventional navigation menus. Defaults to false.

Amount of time to wait in ms (until no more consecutive hits) before showing the subtree of the focal noode, when moving the focal branch. Mainly a performance hack to prevent rapid toggling of subtree elements. Defaults to 360.

Whether to apply the default keyboard navigation. Defaults to true.

Whether to apply the default wheel navigation. Defaults to true.

Whether to apply the default swipe navigation. Defaults to true.

Whether to apply the default tap navigation. Defaults to true.

Whether to allow toggling inspect mode via the Enter key. Defaults to true.

Whether to allow toggling inspect mode via the double tap. Defaults to true.

Global option for disabling resize detection on ALL noodes and branches. Disabling resize detection may give a slight performance boost. Use this option if you know that the size of noodes and branches will never change after creation. Defaults to false.

Number of pixels to move for every pixel swiped in the branch axis. Defaults to 1.

Number of pixels to move for every pixel swiped in the trunk axis. Defaults to 1.

Number of noodes (per unit of velocity) to snap across after a swipe is released. Defaults to 1.

Number of levels (per unit of velocity) to snap across after a swipe is released. Defaults to 1.

Determines whether routing should be enabled for this noodel. Defaults to true.

Whether to render the limit indicators of the canvas. Defaults to true.

Whether to render the child indicators of noodes. Defaults to true.

Whether to render the branch backdrop elements. Defaults to false.

Determines the direction of the trunk axis. Defaults to 'ltr' (left to right).

Determines the direction of the branch axis under the current trunk orientation. Defaults to 'normal'.

Callback after the view has been mounted and properly aligned after the first render. Changes to the view model from here onward will sync with the view and trigger animation effects.

Handler called once after noodel creation, and whenever the focal noode has changed.

• current the current focal noode
• prev the previous focal noode, null on initial call

Handler called once after noodel creation, and whenever the focal parent has changed.

• current the current focal parent
• prev the previous focal parent, null on initial call

Handler called when entered inspect mode.

• noode the current focal noode

Handler called when exited inspect mode.

• noode the current focal noode

Option for disabling resize detection (on the branch axis) for this noode. If set to a boolean, will override the global skipResizeDetection option. Defaults to null.

Option for disabling resize detection (on the trunk axis) for this noode's child branch. If set to a boolean, will override the global skipResizeDetection option. Defaults to null.

If set to a boolean, will override the global showChildIndicators option for this specific noode. Defaults to null.

If set to a boolean, will override the global showBranchBackdrops option for the child branch of this specific noode. Defaults to null.

Handler called whenever this noode entered focus. Will be called once after noodel creation if this is the focal noode.

• self the current focal noode (i.e. this noode)
• prev the previous focal noode, null on initial call

Handler called whenever this noode exited focus.

• self the previous focal noode (i.e. this noode)
• current the current focal noode

Handler called whenever this noode's child branch entered focus. Will be called once after noodel creation if this is the focal parent.

• self the current focal parent (i.e. this noode)
• prev the previous focal parent, null on initial call

Handler called whenever this noode's child branch exited focus.

• self the previous focal parent (i.e. this noode)
• prev the current focal parent

Vue component to be rendered using Vue's <component> tag. Can be name or component reference.

Name-value pairs of props to pass to this component.

Name-value pairs of event listeners to pass to this component.

Outermost container of the noodel that processes all inputs. Use this to style the canvas size and background.

Class applied to the canvas element depending on the current trunk orientation. Use this with descendent combinators to style elements under a specific orientation.

Class applied to the canvas element depending on the current branch direction. Use this with descendent combinators to style elements under a specific branch direction.

Classes applied to the limit indicators (the bars that come up when you reach the view limits).

Transition classes for enter/leave of limit indicators.

The trunk container. You should not need to style this element directly in most cases.

Class applied to the nd-trunk element when moving in the trunk axis. Use this to control the timing and duration of the movement.

Outermost container of a branch that is responsible for its visibility. Occupies 100% length of the canvas. Avoid styling this element directly, use nd-branch-backdrop instead.

Applied to the focal nd-branch-box element.

Transition classes for enter/leave of branches.

Absolute positioned child of the nd-branch-box element that is optionally rendered. Prefer to style this instead of nd-branch-box to prevent conflicts with the visibility mechanism.

Applied to the focal nd-branch-backdrop element.

Outer container for the items of a branch that is responsible for its sliding movement. Avoid styling this element directly, use nd-branch-inner instead.

Applied to the focal nd-branch element.

Class applied to an nd-branch element when moving in the branch axis. Use this to control the timing and duration of the movement.

Immediate container for the items of a branch. Prefer to style this instead of nd-branch to prevent conflicts with the slide mechanism.

Applied to the focal nd-branch-inner element.

Outermost container of a noode. Avoid styling this element directly, use nd-noode instead.

Applied to an active nd-noode-box element.

Immediate container of your noode content. Use this class to control the size and aesthetics of your noodes.

Applied to an active nd-noode element.

Transition classes for enter/leave of noodes during noode insert/delete.

Applied to sibling noodes during noode insert/delete. Use this class to control the animation of siblings as they change position.

Applied to the focal noode during inspect mode.

The backdrop element that appears during inspect mode.

Transition classes for enter/leave of the backdrop.

Class for the child indicator element (the "arrow" that indicates noodes with children).

Applied to the nd-child-indicator of an active noode.

Applied to the nd-child-indicator of a noode that has visible children.

Transition classes for enter/leave of child indicators during noode insert/delete.