🐛 fixed lag in the long layer name animation tooltip (#371)

* 🐛 fixed lag in the tooltip by adding the arrow to the tooltip component * 🐛 removed the conflicting animations * fix: remove conflicting animations
onlook-dev · Sep 17, 2024 · 4bca046 · 4bca046
1 parent 3e15bc8
commit 4bca046
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/app/src/components/ui/tooltip.tsx b/app/src/components/ui/tooltip.tsx
@@ -17,7 +17,8 @@ const TooltipContent = React.forwardRef<
         ref={ref}
         sideOffset={sideOffset}
         className={cn(
-            'z-50 overflow-hidden rounded-md bg-black px-2 py-1.5 text-xs text-text-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+            'z-50 overflow-hidden rounded-md bg-black px-2 py-1.5 text-xs text-text-foreground',
+            'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 duration-100',
             className,
         )}
         {...props}

diff --git a/app/src/routes/editor/LayersPanel/Tree/TreeNode.tsx b/app/src/routes/editor/LayersPanel/Tree/TreeNode.tsx
@@ -179,9 +179,13 @@ const TreeNode = observer(
                 {node.data.textContent !== '' && (
                     <TooltipPortal container={document.getElementById('layer-tab-id')}>
                         <TooltipContent side="right" align="center" sideOffset={sideOffset()}>
-                            <TooltipArrow />
-                            <p
-                                className={'max-w-[200px] overflow-hidden relative'}
+                            <TooltipArrow className="fill-black" />
+                            <motion.p
+                                initial={{ opacity: 0, y: -10 }}
+                                animate={{ opacity: 1, y: 0 }}
+                                exit={{ opacity: 0, y: -10 }}
+                                transition={{ duration: 0.2 }}
+                                className="max-w-[200px] overflow-hidden"
                                 style={{
                                     display: '-webkit-box',
                                     WebkitLineClamp: 4,
@@ -190,7 +194,7 @@ const TreeNode = observer(
                                 }}
                             >
                                 {node.data.textContent}
-                            </p>
+                            </motion.p>
                         </TooltipContent>
                     </TooltipPortal>
                 )}