diff --git a/example/tree-menu.tsx b/example/tree-menu.tsx
index 96acb87..6121015 100644
--- a/example/tree-menu.tsx
+++ b/example/tree-menu.tsx
@@ -19,13 +19,11 @@ export const Menu =(props:{children:React.JSX.Element|React.JSX.Element[]})=>
     const refControl:React.MutableRefObject<CollapseControls|null> = React.useRef( null );
 
     type MenuClassStates = {Keep:string, Open:string, Shut:string, Move:string, Exit:string};
+    const base = `relative transition-all border(8 black) overflow-hidden`;
     const Classes:MenuClassStates =
     {
-      Keep: "relative transition-all border(8 black) ",
-      Open: "h-auto w-1/2     top-8  duration-700",
-      Shut: "h-0    w-[300px] top-0 duration-300",
-      Move: "",
-      Exit: "h-auto w-auto top-36 px-4 opacity-0"
+      Open: `${base} h-auto top-8  duration-700`,
+      Shut: `${base} h-0    top-0  duration-300`,
     };
     const Window = window as {TwindInst?:(c:string)=>string};
     if(Window.TwindInst)
@@ -36,8 +34,8 @@ export const Menu =(props:{children:React.JSX.Element|React.JSX.Element[]})=>
       }
     }
 
-    React.useEffect(()=>refControl.current = Collapser(refElement.current as HTMLElement, true), []);
-    React.useEffect(()=> {refControl.current && refControl.current(stateGet.open, 1000, ()=>stateSet({done:true}))}, [stateGet.open])
+    React.useEffect(()=>refControl.current = Collapser(refElement.current as HTMLElement, "Shut", Classes), []);
+    React.useEffect(()=> {refControl.current && refControl.current(stateGet.open ? "Open" : "Shut", ()=>stateSet({done:true}))}, [stateGet.open])
 
     return <div class={Classes.Keep} data-class-keep={Classes.Keep} data-class-open={Classes.Open} data-class-shut={Classes.Shut} ref={refElement as React.Ref<HTMLDivElement>}>
       { (!stateGet.open && stateGet.done) ? null : props.children}
@@ -54,96 +52,105 @@ export const Button =()=>
     </>;
 };
 
+type StyleSize = [classes:string, width:number, height:number];
+type StylePack = Record<string, string>;
+type StyleCalc = Record<string, StyleSize>;
+const StyleCalc =(inElement:HTMLElement, inClasses:StylePack)=>
+{
+  const initialStyle = inElement.getAttribute("style")||"";
+  const initialClass = inElement.getAttribute("class")||"";
+  const output = {} as StyleCalc;
+
+
+  inElement.setAttribute("style", `transition: none; overflow: hidden;`);
+  inElement.clientHeight;
+  Object.entries(inClasses).forEach(([key, value])=>
+  {
+    inElement.setAttribute("class", value);
+    inElement.clientHeight;
+    output[key] =  [value, inElement.offsetWidth, inElement.offsetHeight];
+  });
+  inElement.setAttribute("style", initialStyle);
+  inElement.setAttribute("class", initialClass);
+  inElement.clientHeight;
+
+  return output;
+};
+
+
 type DoneCallback =(openState:boolean)=>void;
-export type CollapseControls =(inOpen?:boolean, inMs?:number, inDone?:DoneCallback)=>void;
-export function Collapser(inElement:HTMLElement, initialState = false)
+export type CollapseControls =(inOpen?:string, inDone?:DoneCallback)=>void;
+export function Collapser(inElement:HTMLElement, initialState:string, library:Record<string, string>)
 {
     let userDone:DoneCallback = (openState) => {};
     let userMode = initialState;
     let frameRequest = 0;
     let inTransition = false;
-
-    let transitions = new Set();
-    let measurements:false|Record<string, { width: number; height: number; }>
+    let measurements:StyleCalc;
+    const transitions:Set<string> = new Set();
 
     const run = (inEvent:TransitionEvent)=>
     {
-      if (inEvent.target == inElement)
-      {
-        transitions.add(inEvent.propertyName);
-      }
+      console.log("+", inEvent.propertyName);
+      (inEvent.target == inElement) && transitions.add(inEvent.propertyName);
     };
-
     const end = (inEvent:TransitionEvent)=>
     {
+      console.log("-", inEvent.propertyName);
       if (inEvent.target == inElement)
       {
         transitions.delete(inEvent.propertyName);
         if(transitions.size === 0)
         {
-          if (userMode)
+          console.log("--done--", userMode);
+          inElement.setAttribute("style", "transition:none;");
+          inElement.clientHeight;
+          frameRequest = requestAnimationFrame(()=>
           {
-            inElement.setAttribute("style", "transition:none;");
-            inElement.clientHeight;
-            frameRequest = requestAnimationFrame(()=>{inElement.setAttribute("style", "")});
-          }
-          inTransition = false;
-          userDone(userMode);          
+            inElement.setAttribute("style", "");
+            inTransition = false;
+            userDone(userMode);   
+          });       
         }
-
       }
     };
-
-    const getMeasurements =(inClasses:Record<string, string>)=>
-    {
-      inElement.setAttribute("style", `transition: none;`);
-      const initialClasses = inElement.getAttribute("class")||"";
-      const output = {} as Record<string, {width:number, height:number}>;
-      Object.entries(inClasses).forEach(([key, value])=>
-      {
-        inElement.setAttribute("class", value);
-        output[key] = { width: inElement.offsetWidth, height: inElement.offsetHeight };
-      });
-      inElement.removeAttribute("style");
-      inElement.setAttribute("class", initialClasses);
-      return output;
-    };
   
     inElement.addEventListener("transitionend", end);
     inElement.addEventListener("transitionrun", run);
 
-    return function(inOpen, inMs, inDone)
+    return function(inState:string, inDone)
     {
       cancelAnimationFrame(frameRequest);
 
       if(arguments.length)
       {
-        userDone = inDone|| ((m)=>{}) as DoneCallback;
-        userMode = inOpen === true;
+        if(!library[inState]){ return; }
 
-        if((inOpen || !measurements) && !inTransition)
+        userDone = inDone|| ((m)=>{}) as DoneCallback;
+        userMode = inState;
+
+        if(!inTransition)
         {
-          const keep = inElement.getAttribute("data-class-keep")+" ";
-          measurements = getMeasurements({
-            Open: keep + inElement.getAttribute("data-class-open"),
-            Shut: keep + inElement.getAttribute("data-class-shut"),
-          });
+          measurements = StyleCalc(inElement, library);
+          console.log("measurements taken", measurements)
         }
 
-        inElement.style.overflow = "hidden";
-        inElement.style.width = inElement.offsetWidth + "px";
-        inElement.style.height = inElement.offsetHeight + "px";
-
-        inTransition = true;
-
-        frameRequest = requestAnimationFrame(()=>
+        if(measurements)
         {
-            const measure = inOpen ? measurements.Open : measurements.Shut;
-            inElement.style.width = measure.width + "px";
-            inElement.style.height = measure.height + "px";
-            inElement.className = inElement.getAttribute("data-class-keep") + " " + inElement.getAttribute(`data-class-${inOpen?"open":"shut"}`);
-
-        });
+          const [classes, width, height] = measurements[inState] as StyleSize;
+          inElement.style.overflow = "hidden";
+          inElement.style.width = inElement.offsetWidth + "px";
+          inElement.style.height = inElement.offsetHeight + "px";
+          inTransition = true;
+          console.log(`from: {${inElement.offsetWidth} ${inElement.offsetHeight}}`)
+          frameRequest = requestAnimationFrame(()=>
+          {
+            inElement.style.width = width + "px";
+            inElement.style.height = height + "px";
+            inElement.className = classes;
+            console.log(`  to: {${width} ${height}}`)
+          });
+        }
       }
       else
       {
@@ -151,4 +158,5 @@ export function Collapser(inElement:HTMLElement, initialState = false)
         inElement.removeEventListener("transitionend", end);
       }
     } as CollapseControls;
+
 }
\ No newline at end of file