diff --git a/example/tree-menu.tsx b/example/tree-menu.tsx
index 6121015..7bd5373 100644
--- a/example/tree-menu.tsx
+++ b/example/tree-menu.tsx
@@ -22,8 +22,9 @@ export const Menu =(props:{children:React.JSX.Element|React.JSX.Element[]})=>
     const base = `relative transition-all border(8 black) overflow-hidden`;
     const Classes:MenuClassStates =
     {
-      Open: `${base} h-auto top-8  duration-700`,
-      Shut: `${base} h-0    top-0  duration-300`,
+      Shut: `${base} h-0    top-0  w-1/2  duration-300`,
+      Open: `${base} h-auto top-8  w-full  duration-700`,
+      lol: `${base} h-auto top-36 bg-yellow-500  w-2/3  duration-700`,
     };
     const Window = window as {TwindInst?:(c:string)=>string};
     if(Window.TwindInst)
@@ -37,7 +38,7 @@ export const Menu =(props:{children:React.JSX.Element|React.JSX.Element[]})=>
     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>}>
+    return <div ref={refElement as React.Ref<HTMLDivElement>}>
       { (!stateGet.open && stateGet.done) ? null : props.children}
     </div>;
 };
@@ -61,23 +62,19 @@ const StyleCalc =(inElement:HTMLElement, inClasses:StylePack)=>
   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;
+  inElement.offsetHeight;
+  inElement.setAttribute("style", initialStyle);
 
   return output;
 };
 
-
 type DoneCallback =(openState:boolean)=>void;
 export type CollapseControls =(inOpen?:string, inDone?:DoneCallback)=>void;
 export function Collapser(inElement:HTMLElement, initialState:string, library:Record<string, string>)
@@ -137,19 +134,20 @@ export function Collapser(inElement:HTMLElement, initialState:string, library:Re
 
         if(measurements)
         {
-          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}}`)
-          });
+            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.height = height + "px";
+              inElement.style.width = width + "px";
+              inElement.className = classes;
+              console.log(`  to: {${width} ${height}}`)
+            });
         }
       }
       else