feat: Animate the mode selector bar at the top of the page (#374)

onlook-dev · Sep 17, 2024 · ccf1ae5 · ccf1ae5
1 parent 48c0417
commit ccf1ae5
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 28 deletions.
diff --git a/app/package.json b/app/package.json
@@ -61,7 +61,7 @@
         "embla-carousel-react": "^8.3.0",
         "embla-carousel-wheel-gestures": "^8.0.1",
         "fflate": "^0.8.2",
-        "framer-motion": "^11.2.12",
+        "framer-motion": "^11.5.4",
         "js-string-escape": "^1.0.1",
         "localtunnel": "^2.0.2",
         "lodash.debounce": "^4.0.8",
@@ -87,8 +87,8 @@
         "@eslint/compat": "^1.1.1",
         "@eslint/js": "^9.7.0",
         "@playwright/test": "^1.42.1",
-        "@types/babel-generator": "^6.25.8",
         "@types/babel__traverse": "^7.20.6",
+        "@types/babel-generator": "^6.25.8",
         "@types/bun": "^1.1.6",
         "@types/css-tree": "^2.3.8",
         "@types/culori": "^2.1.0",

diff --git a/app/src/routes/editor/TopBar/ModeToggle/index.tsx b/app/src/routes/editor/TopBar/ModeToggle/index.tsx
@@ -1,9 +1,10 @@
+import React, { useEffect, useState } from 'react';
+import { motion } from 'framer-motion';
 import { HotKeyLabel } from '@/components/ui/hotkeys-label';
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { EditorMode } from '@/lib/models';
 import { observer } from 'mobx-react-lite';
-import { useEffect, useState } from 'react';
 import { useEditorEngine } from '../..';
 import { capitalizeFirstLetter } from '/common/helpers';
 import { Hotkey } from '/common/hotkeys';
@@ -35,37 +36,53 @@ const ModeToggle = observer(() => {
     }
 
     return (
-        <ToggleGroup
-            className="font-normal -mt-2"
-            type="single"
-            value={mode}
-            onValueChange={(value) => {
-                if (value) {
-                    editorEngine.mode = value as EditorMode;
-                    setMode(value as EditorMode);
-                }
-            }}
-        >
-            {MODE_TOGGLE_ITEMS.map((item) => (
-                <Tooltip key={item.mode}>
-                    <TooltipTrigger asChild>
-                        <div>
+        <div className="relative">
+            <ToggleGroup
+                className="font-normal"
+                type="single"
+                value={mode}
+                onValueChange={(value) => {
+                    if (value) {
+                        editorEngine.mode = value as EditorMode;
+                        setMode(value as EditorMode);
+                    }
+                }}
+            >
+                {MODE_TOGGLE_ITEMS.map((item) => (
+                    <Tooltip key={item.mode}>
+                        <TooltipTrigger asChild>
                             <ToggleGroupItem
                                 variant={'overline'}
                                 value={item.mode}
                                 aria-label={item.hotkey.description}
+                                className={`transition-all duration-300 ease-in-out px-4 py-2 ${
+                                    mode === item.mode ? 'text-white font-bold' : 'font-normal'
+                                }`}
                             >
                                 {capitalizeFirstLetter(item.mode)}
                             </ToggleGroupItem>
-                        </div>
-                    </TooltipTrigger>
-                    <TooltipContent side="bottom">
-                        <HotKeyLabel hotkey={item.hotkey} />
-                    </TooltipContent>
-                </Tooltip>
-            ))}
-        </ToggleGroup>
+                        </TooltipTrigger>
+                        <TooltipContent side="bottom">
+                            <HotKeyLabel hotkey={item.hotkey} />
+                        </TooltipContent>
+                    </Tooltip>
+                ))}
+            </ToggleGroup>
+            <motion.div
+                className="absolute -top-1 h-0.5 bg-white"
+                initial={false}
+                animate={{
+                    width: '50%',
+                    x: mode === EditorMode.DESIGN ? '0%' : '100%'
+                }}
+                transition={{
+                    type: 'tween',
+                    ease: 'easeInOut',
+                    duration: 0.3
+                }}
+            />
+        </div>
     );
 });
 
-export default ModeToggle;
+export default ModeToggle;
diff --git a/demos/next/next-env.d.ts b/demos/next/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.