Skip to content
All effectsCode

Tree Draw

The connector lines draw themselves as a folder opens.

Pure CSSCodePro

Usage

srccomponentsstylestokens.css

Meant for

File TreeSidebar

Examples

On a File Tree

Connector lines drawing themselves as the folder opens, then each label arriving 120ms behind its line. clip-path on the line, so there is no dash maths and no SVG. FileTree has no connector lines of its own, so the rows here are FileTree's rows (same box, type and icons) with the effect's lines added; mark them data-wm-line and data-wm-label.

srccomponentslibstyles.cssindex.ts

The class is wm wm-tree-draw — the first half is the marker the trigger and reduced-motion rules hook into, the second is the effect.