diff --git a/src/components/TheNodeTree.vue b/src/components/TheNodeTree.vue
index f1602ec..5108ec6 100644
--- a/src/components/TheNodeTree.vue
+++ b/src/components/TheNodeTree.vue
@@ -176,6 +176,23 @@ const onWheel = (event: WheelEvent) => {
 };
 
 
+let animationHandle = 0;
+const onAnimationStart = (event: AnimationEvent) => {
+  if (!(event.target! as HTMLElement).classList.contains("socket-value-editor")) return;
+  updateLinksEveryFrame();
+};
+const onAnimationEnd = (event: AnimationEvent) => {
+  if (!(event.target! as HTMLElement).classList.contains("socket-value-editor")) return;
+  cancelAnimationFrame(animationHandle);
+};
+
+const updateLinksEveryFrame = () => {
+  rerenderLinks();
+
+  animationHandle = requestAnimationFrame(updateLinksEveryFrame);
+};
+
+
 defineExpose({
   selectNode,
   reloadOutputs,
@@ -184,57 +201,71 @@ defineExpose({
 
 <template>
   <!-- drag events here are from node tray -->
-  <div class="node-tree"
-      @dragover="event => isDraggingNodeFromNodeTray && event.preventDefault()"
-      @drop="event => isDraggingNodeFromNodeTray && $emit('add-node', currentlyDraggedNodeConstructor, [event.pageX, event.pageY])"
-
-      @pointerdown.self="onPointerDownSelf"
-      @pointerdown="event => event.button === 1 && beginDragCamera(event)"
-      @wheel.passive="onWheel"
-      
-      :style="{
-        '--pos-x': `${viewportPos[0]}px`,
-        '--pos-y': `${viewportPos[1]}px`,
-        '--scale': `${viewportScale}`,
-      } as any">
-    <div class="nodes">
-      <NodeVue
-        v-for="node of tree.nodes"
-        :key="node.id"
-        :node="(node as Node)"
-        @drag-socket="onDragSocket"
-        @link-to-socket="onLinkToSocket"
-        @node-selected="selectNode"
-
-        @potential-socket-position-change="rerenderLinks"
-        
-        @field-value-change="(requiresShaderReload, updateSource) => reloadOutputs(requiresShaderReload, updateSource)"
-        @tree-update="reloadOutputs(true, NodeUpdateSource.TreeReload)"
-      />
+  <div
+    class="node-tree"
+    @dragover="event => isDraggingNodeFromNodeTray && event.preventDefault()"
+    @drop="event => isDraggingNodeFromNodeTray && $emit('add-node', currentlyDraggedNodeConstructor, [event.pageX, event.pageY])"
+
+    @pointerdown.self="onPointerDownSelf"
+    @pointerdown="event => event.button === 1 && beginDragCamera(event)"
+    @wheel.passive="onWheel"
+    
+    :style="{
+      '--pos-x': `${viewportPos[0]}px`,
+      '--pos-y': `${viewportPos[1]}px`,
+      '--scale': `${viewportScale}`,
+    } as any"
+  >
+    <div
+      class="nodes"
+      @animationstart.capture="onAnimationStart"
+      @animationend.capture="onAnimationEnd"
+    >
+      <TransitionGroup name="pop-in">
+        <NodeVue
+          v-for="node of tree.nodes"
+          :key="node.id"
+          :node="(node as Node)"
+          @drag-socket="onDragSocket"
+          @link-to-socket="onLinkToSocket"
+          @node-selected="selectNode"
+
+          @potential-socket-position-change="rerenderLinks"
+          
+          @field-value-change="(requiresShaderReload, updateSource) => reloadOutputs(requiresShaderReload, updateSource)"
+          @tree-update="reloadOutputs(true, NodeUpdateSource.TreeReload)"
+        />
+      </TransitionGroup>
     </div>
 
-    <svg class="links"
-        :viewbox="`0 0 ${$el?.clientWidth ?? 300} ${$el?.clientHeight ?? 150}`">
+    <svg
+      class="links"
+      :viewbox="`0 0 ${$el?.clientWidth ?? 300} ${$el?.clientHeight ?? 150}`"
+    >
       <g>
         <template v-if="draggingSocket">
-          <NodeLink v-if="draggedSocket?.isOutput"
-              class="new-link"
-              :link="null"
-              :socketVues="socketVues"
-
-              :x0="draggedSocketVue?.socketPos()[0] ?? 0"
-              :y0="draggedSocketVue?.socketPos()[1] ?? 0"
-              :x1="pointerX"
-              :y1="pointerY" />
-          <NodeLink v-else
-              class="new-link"
-              :link="null"
-              :socketVues="socketVues"
-
-              :x0="pointerX"
-              :y0="pointerY"
-              :x1="draggedSocketVue?.socketPos()[0] ?? 0"
-              :y1="draggedSocketVue?.socketPos()[1] ?? 0" />
+          <NodeLink
+            v-if="draggedSocket?.isOutput"
+            class="new-link"
+            :link="null"
+            :socketVues="socketVues"
+
+            :x0="draggedSocketVue?.socketPos()[0] ?? 0"
+            :y0="draggedSocketVue?.socketPos()[1] ?? 0"
+            :x1="pointerX"
+            :y1="pointerY"
+          />
+          <NodeLink
+            v-else
+            class="new-link"
+            :link="null"
+            :socketVues="socketVues"
+
+            :x0="pointerX"
+            :y0="pointerY"
+            :x1="draggedSocketVue?.socketPos()[0] ?? 0"
+            :y1="draggedSocketVue?.socketPos()[1] ?? 0"
+          />
         </template>
 
         <TheNodeTreeLinks :socketVues="socketVues" />
@@ -269,6 +300,28 @@ defineExpose({
     > :deep(*) {
       pointer-events: initial;
     }
+
+    // vue transition
+    > .pop-in-enter-active {
+      animation: pop-in .25s cubic-bezier(.26,1.5,.39,.99);
+    }
+    > .pop-in-leave-active {
+      pointer-events: none;
+      animation: fade-out .125s cubic-bezier(.44,0,1,.71);
+    }
+    @keyframes pop-in {
+      0% {
+        opacity: 0;
+        transform: scale(0);
+      }
+    }
+
+    @keyframes fade-out {
+      100% {
+        transform: scale(0.5);
+        opacity: 0;
+      }
+    }
   }
 
   > .nodes,
diff --git a/src/components/generic/Button.vue b/src/components/generic/Button.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/node/NodeLink.vue b/src/components/node/NodeLink.vue
index 4e65af1..942cf6a 100644
--- a/src/components/node/NodeLink.vue
+++ b/src/components/node/NodeLink.vue
@@ -75,36 +75,49 @@ C${x0! + controlPointDx},${y0} ${x1! - controlPointDx},${y1}, ${x1},${y1}`;
 </script>
 
 <template>
-  <path v-if="socketLoaded"
-      :d="path"
-      
-      :class="{
-                subtle,
-                invalid,
-            }" />
+  <path
+    v-if="socketLoaded"
+    :d="path"
+    
+    :class="{
+      subtle,
+      invalid,
+    }"
+  />
 </template>
 
 <style lang="scss" scoped>
 path {
+  --dasharray-length: -22px;
+
   fill: none;
 
+  transition:
+      stroke .25s ease-in-out,
+      stroke-dasharray .5s ease-in-out;
+
+  animation: move-stroke 0.5s infinite linear;
+
+  stroke-dasharray: 20px 2px;
+
+  @keyframes move-stroke {
+    0% {
+      stroke-dashoffset: 0;
+    }
+    100% {
+      stroke-dashoffset: var(--dasharray-length);
+    }
+  }
+
   &.subtle {
     opacity: 0.25;
   }
 
   &.invalid {
+    --dasharray-length: -8px;
+
     stroke: #f68;
     stroke-dasharray: 4px;
-    animation: move-stroke 0.25s infinite linear;
-
-    @keyframes move-stroke {
-      0% {
-        stroke-dashoffset: 0;
-      }
-      100% {
-        stroke-dashoffset: -8px;
-      }
-    }
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/components/node/NodeSocket.vue b/src/components/node/NodeSocket.vue
index f54015c..0a52735 100644
--- a/src/components/node/NodeSocket.vue
+++ b/src/components/node/NodeSocket.vue
@@ -163,52 +163,76 @@ Object.defineProperties(socketVue, {
   },
 });
 
+// for transition
+const height = ref(0);
+const nodeSocketFieldRef = ref<InstanceType<typeof NodeSocketField> | null>(null);
+onMounted(() => {
+  if (!shouldShowFields.value) return;
+  height.value = nodeSocketFieldRef.value!.$el.clientHeight;
+});
 </script>
 
 <template>
-  <div class="socket-container"
-      :class="{'in': socket.isInput}"
-      ref="socketContainer"
+  <div
+    class="socket-container"
+    :class="{'in': socket.isInput}"
+    ref="socketContainer"
+    
+    @pointerover="() => !draggedSocket && showTooltip()"
+    @pointerout="tooltipController.hideTooltip()"
+  >
+    <div
+      class="socket"
+      v-if="socket.showSocket"
+
+      ref="socketHitbox"
+      draggable="true"
+      @dragstart="event => (ondragstart(event), tooltipController.hideTooltip())"
+      @dragenter.prevent
+      @dragover.prevent="isDraggedOver = true"
+      @drop="event => (ondrop(event), isDraggedOver = false)"
+      @pointerdown="event => event.button === 0 && event.stopPropagation()"
+      @dragleave="isDraggedOver = false"
+      @dragend="event => (event.currentTarget as HTMLDivElement)?.blur()"
+
+      @dblclick="unlinkLinks"
       
-      @pointerover="() => !draggedSocket && showTooltip()"
-      @pointerout="tooltipController.hideTooltip()">
-    <div class="socket"
-        v-if="socket.showSocket"
-
-        ref="socketHitbox"
-        draggable="true"
-        @dragstart="event => (ondragstart(event), tooltipController.hideTooltip())"
-        @dragenter.prevent
-        @dragover.prevent="isDraggedOver = true"
-        @drop="event => (ondrop(event), isDraggedOver = false)"
-        @pointerdown="event => event.button === 0 && event.stopPropagation()"
-        @dragleave="isDraggedOver = false"
-        @dragend="event => (event.currentTarget as HTMLDivElement)?.blur()"
-
-        @dblclick="unlinkLinks"
-        
+      :class="{
+        hiding: Boolean(draggedSocket) && !canLinkDraggedSocket,
+      }"
+    >
+      <div
+        class="socket-display"
         :class="{
-          hiding: Boolean(draggedSocket) && !canLinkDraggedSocket,
-        }">
-      <div class="socket-display"
-          :class="{
-            constant: socket.constant,
-						excited: Boolean(draggedSocket) && canLinkDraggedSocket,
-            accepting: isDraggedOver && canLinkDraggedSocket,
-          }"
-          :style="{'--socket-color': socketColor} as any"></div>
+          constant: socket.constant,
+          excited: Boolean(draggedSocket) && canLinkDraggedSocket,
+          accepting: isDraggedOver && canLinkDraggedSocket,
+        }"
+        :style="{'--socket-color': socketColor} as any"
+      ></div>
     </div>
     <div
       class="socket-label"
       v-html="getString(socket.label)"
     ></div>
 
-    <NodeSocketField v-if="shouldShowFields"
+    <Transition
+      name="drawer"
+      :style="{
+        '--end-height': `-${height}px`,
+      }"
+      ref=""
+    >
+      <NodeSocketField
+        v-if="shouldShowFields"
         :socket="socket"
         @value-change="(requiresShaderReload) => {
           socket.node.onSocketFieldValueChange(socket, tree as Tree);
           $emit('field-value-change', requiresShaderReload, socket);
-        }" />
+        }"
+        ref="nodeSocketFieldRef"
+      />
+    </Transition>
   </div>
 </template>
 
@@ -299,5 +323,27 @@ Object.defineProperties(socketVue, {
       right: var(--socket-offset);
     }
   }
+
+
+  // vue transition
+  > .drawer-enter-active {
+    animation: drawer .125s cubic-bezier(0,.74,.55,1);
+  }
+
+  > .drawer-leave-active {
+    pointer-events: none;
+    animation: drawer .125s cubic-bezier(.45,0,1,.26) reverse;
+  }
+
+  @keyframes drawer {
+    0% {
+      transform: scaleY(0);
+      margin-bottom: var(--end-height);
+    }
+
+    100% {
+      margin-bottom: 0;
+    }
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/components/node/NodeSocketField.vue b/src/components/node/NodeSocketField.vue
index 1f94ca1..cf85b24 100644
--- a/src/components/node/NodeSocketField.vue
+++ b/src/components/node/NodeSocketField.vue
@@ -60,8 +60,10 @@ type VectorSocket = Socket<SocketType.Vector | SocketType.VectorOrColor>;
 </script>
 
 <template>
-  <div class="socket-value-editor"
-      ref="editorContainer">
+  <div
+    class="socket-value-editor"
+    ref="editorContainer"
+  >
     <template v-if="isNumeric">
       <EntrySlider
         v-model="(socket as Socket<SocketType.Float>).fieldValue"
@@ -147,9 +149,12 @@ type VectorSocket = Socket<SocketType.Vector | SocketType.VectorOrColor>;
   </div>
 </template>
 
-<!-- <style lang="scss">
-.socket-value-editor.entry {
-  border-radius: 4px;
-  overflow: hidden;
+<style lang="scss">
+.socket-value-editor {
+  transform-origin: top;
 }
-</style> -->
\ No newline at end of file
+// .socket-value-editor.entry {
+//   border-radius: 4px;
+//   overflow: hidden;
+// }
+</style>
\ No newline at end of file
diff --git a/src/components/node/NodeVue.vue b/src/components/node/NodeVue.vue
index 6d4f07f..24238a7 100644
--- a/src/components/node/NodeVue.vue
+++ b/src/components/node/NodeVue.vue
@@ -148,27 +148,30 @@ Object.assign(nodeVue, {
 </script>
 
 <template>
-  <div class="node"
-      @pointerdown="event => {
-        emitNodeSelected(event);
-        beginDrag(event);
-      }"
-      :style="{
-        'left': `${node.pos[0]}px`,
-        'top': `${node.pos[1]}px`,
-        '--node-width': `${node.width}px`,
-      } as any"
-      :class="[{
-        'subtle': isSubtle,
-        'selected': isSelected,
-        'reroute': node instanceof organization.RerouteNode,
-      }, nodeCategoryClass]">
+  <div
+    class="node"
+    @pointerdown="event => {
+      emitNodeSelected(event);
+      beginDrag(event);
+    }"
+    :style="{
+      'left': `${node.pos[0]}px`,
+      'top': `${node.pos[1]}px`,
+      '--node-width': `${node.width}px`,
+    } as any"
+    :class="[{
+      'subtle': isSubtle,
+      'selected': isSelected,
+      'reroute': node instanceof organization.RerouteNode,
+    }, nodeCategoryClass]"
+  >
     <div class="node-border"></div>
 
-    <div class="label"
-        v-if="shouldDisplayLabel"
-        v-html="getString(node.label)">
-    </div>
+    <div
+      class="label"
+      v-if="shouldDisplayLabel"
+      v-html="getString(node.label)"
+    ></div>
 
     <NodeSpecialInput
       :node="node"
@@ -186,8 +189,10 @@ Object.assign(nodeVue, {
     </div> -->
 
     <div class="in-sockets">
-      <template v-for="(socket, index) of node.ins"
-          :key="socket.id">
+      <template
+        v-for="(socket, index) of node.ins"
+        :key="socket.id"
+      >
         <NodeOutputColorDisplay
           v-if="node instanceof externals.DeviceTransformNode
               && socket.hasLinks"
@@ -213,23 +218,29 @@ Object.assign(nodeVue, {
     </div>
 
     <div class="out-sockets">
-      <NodeSocket v-for="socket of node.outs"
-          :key="socket.id"
-          :socket="socket"
-          @drag-socket="(socketVue: InstanceType<typeof NodeSocket>) => $emit('drag-socket', socketVue)"
-          @link-to-socket="(socketVue: InstanceType<typeof NodeSocket>) => (
-            $emit('link-to-socket', socketVue),
-            $emit('tree-update'),
-            $emit('potential-socket-position-change'))"
-
-          @unlink="
-            $emit('tree-update'),
-            $emit('potential-socket-position-change')"/>
+      <NodeSocket
+        v-for="socket of node.outs"
+        :key="socket.id"
+        :socket="socket"
+        @drag-socket="(socketVue: InstanceType<typeof NodeSocket>) => $emit('drag-socket', socketVue)"
+        @link-to-socket="(socketVue: InstanceType<typeof NodeSocket>) => (
+          $emit('link-to-socket', socketVue),
+          $emit('tree-update'),
+          $emit('potential-socket-position-change'))
+        "
+
+        @unlink="
+          $emit('tree-update'),
+          $emit('potential-socket-position-change')
+        "
+      />
     </div>
 
     <!-- {{node.output().map((x: number) => x.toFixed(4))}} -->
-    <NodeOutput :node="node"
-        ref="outputVue" />
+    <NodeOutput
+      :node="node"
+      ref="outputVue"
+    />
   </div>
 </template>