Tree view · Animation
Built-in JS animation, instant mode, and custom Motion-driven transitions.
Playground
Corex
corex
lib
tree_view.ex
tree_view_demo.ex
mix.exs
Instant
Corex
corex
lib
tree_view.ex
tree_view_demo.ex
mix.exs
<.tree_view
class="tree-view"
animation="instant"
expanded_value={["repo-corex", "repo-lib"]}
items={Corex.Tree.new([
%{label: "corex", value: "repo-corex", children: [
%{label: "lib", value: "repo-lib", children: [
%{label: "tree_view.ex", value: "repo-lib-tree-view-ex"},
%{label: "tree_view_demo.ex", value: "repo-lib-tree-view-demo-ex"}
]},
%{label: "mix.exs", value: "repo-mix-exs"}
]}
])}
/>
Custom (Motion)
Corex
corex
lib
tree_view.ex
tree_view_demo.ex
mix.exs
<.tree_view
class="tree-view"
animation="custom"
expanded_value={["repo-corex", "repo-lib"]}
on_expanded_change_client="my-tree-view-changed"
items={Corex.Tree.new([
%{label: "corex", value: "repo-corex", children: [
%{label: "lib", value: "repo-lib", children: [
%{label: "tree_view.ex", value: "repo-lib-tree-view-ex"},
%{label: "tree_view_demo.ex", value: "repo-lib-tree-view-demo-ex"}
]},
%{label: "mix.exs", value: "repo-mix-exs"}
]}
])}
/>
import { animate } from "motion"
import {
findTreeBranch,
animateHeightOpen,
animateHeightClose,
} from "corex"
const reducedMotion = () =>
window.matchMedia("(prefers-reduced-motion: reduce)").matches
document.addEventListener("my-tree-view-changed", (e) => {
const root = document.getElementById(e.detail.id)
if (!root) return
e.detail.added.forEach((v) => {
const el = findTreeBranch(root, v)
if (!el) return
animateHeightOpen(el, { animator: animate, duration: 0.5, easing: [0.16, 1, 0.3, 1] })
if (!reducedMotion()) {
animate(
el,
{ filter: ["blur(8px)", "blur(0px)"], y: [-10, 0] },
{ duration: 0.55, easing: [0.16, 1, 0.3, 1] },
)
}
})
e.detail.removed.forEach((v) => {
const el = findTreeBranch(root, v)
if (!el) return
animateHeightClose(el, { animator: animate, duration: 0.28, easing: "ease-in" })
if (!reducedMotion()) {
animate(
el,
{ filter: ["blur(0px)", "blur(8px)"], y: [0, -8] },
{ duration: 0.26, easing: "ease-in" },
)
}
})
})