Merge branch 'master' into fix/gesture-variant

Author: rick-hup

README.md

@@ -1,9 +1,4 @@
-<p align="center">
-  <img width="100" height="100" alt="Motion logo" src="https://user-images.githubusercontent.com/7850794/164965523-3eced4c4-6020-467e-acde-f11b7900ad62.png" />
-</p>
-<h1 align="center">Motion for Vue</h1>
-
-<br>
+<h1 align="center"> <img width="35" height="35" alt="Motion logo" src="https://github.com/user-attachments/assets/00d6d1c3-72c4-4c2f-a664-69da13182ffc" /><br />Motion for Vue</h1>
 
 <p align="center">
   <a href="https://www.npmjs.com/package/motion-v" target="_blank">
@@ -70,6 +65,29 @@ import { motion } from 'motion-v'
 </template>
 ```
 
+## ⚡️ Motion+
+
+Learn, Design, Build. [Motion+](https://motion.dev/plus) is a one-time fee, lifetime update membership that provides:
+- 160+ premium Motion Examples
+- Motion UI features like Cursor and Ticker
+- Motion Studio animation editing for VS Code `alpha`
+- Early access content
+- Private Discord
+
+[Get Motion+](https://motion.dev/plus)
+
+## 🎨 Studio
+
+![Video of bezier curve editing](https://framerusercontent.com/images/KO5dnHOUSNGb9S73p1J7nLhoFI.gif)
+
+Motion Studio is a versatile suite of developer tools allowing you to:
+
+-   Visually edit CSS and Motion easing curves in VS Code
+-   Generate CSS springs with LLMs
+-   Load Motion docs into your LLM
+
+Get started with [Motion Studio](https://motion.dev/docs/tools-quick-start).
+
 ### 💎 Contribute
 
 - Want to contribute to Motion? Our [contributing guide](https://github.com/motiondivision/motion-vue/blob/master/CONTRIBUTING.md) has you covered.
@@ -95,12 +113,19 @@ Motion powers Framer animations, the web builder for creative pros. Design and s
 
 ### Platinum
 
-<a href="https://syntax.fm"><img alt="Syntax.fm" src="https://github.com/user-attachments/assets/ab852bfe-b36c-490b-b98d-4061158c4863" width="300px" height="200px"></a> <a href="https://tailwindcss.com"><img alt="Tailwind" src="https://github.com/user-attachments/assets/c0496f09-b8ee-4bc4-85ab-83a071bbbdec" width="300px" height="200px"></a> <a href="https://emilkowal.ski"><img alt="Emil Kowalski" src="https://github.com/user-attachments/assets/29f56b1a-37fb-4695-a6a6-151f6c24864f" width="300px" height="200px"></a> <a href="https://linear.app"><img alt="Linear" src="https://github.com/user-attachments/assets/a93710bb-d8ed-40e3-b0fb-1c5b3e2b16bb" width="300px" height="200px"></a>
+<a href="https://tailwindcss.com"><img alt="Tailwind" src="https://github.com/user-attachments/assets/c0496f09-b8ee-4bc4-85ab-83a071bbbdec" width="300px" height="200px"></a> <a href="https://linear.app"><img alt="Linear" src="https://github.com/user-attachments/assets/a93710bb-d8ed-40e3-b0fb-1c5b3e2b16bb" width="300px" height="200px"></a>
 
 ### Gold
 
-<a href="https://vercel.com"><img alt="Vercel" src="https://github.com/user-attachments/assets/23cb1e37-fa67-49ad-8f77-7f4b8eaba325" width="225px" height="150px"></a> <a href="https://liveblocks.io"><img alt="Liveblocks" src="https://github.com/user-attachments/assets/31436a47-951e-4eab-9a68-bdd54ccf9444" width="225px" height="150px"></a> <a href="https://lu.ma"><img alt="Luma" src="https://github.com/user-attachments/assets/4fae0c9d-de0f-4042-9cd6-e07885d028a9" width="225px" height="150px"></a>
+<a href="https://tailwindcss.com"><img alt="Tailwind" src="https://github.com/user-attachments/assets/1d5f2571-8bc3-4367-9fec-14d291168ff0" width="200px" height="120px"></a> <a href="https://emilkowal.ski"><img alt="Emil Kowalski" src="https://github.com/user-attachments/assets/33d1cb98-238a-4eed-a0df-9c7ab097d65b" width="200px" height="120px"></a> <a href="https://liveblocks.io"><img alt="Liveblocks" src="https://github.com/user-attachments/assets/28eddbe5-1617-4e74-969d-2eb6fcd481af" width="200px" height="120px"></a> <a href="https://vercel.com"><img alt="Vercel" src="https://github.com/user-attachments/assets/abc473bd-07ae-4a7d-9833-efe9dadb3773" width="200px" height="120px"></a> <a href="https://lu.ma"><img alt="Luma" src="https://github.com/user-attachments/assets/ac282433-6adb-4ad2-9fd2-5c6ee513c14b" width="200px" height="120px"></a> <a href="https://notion.com"><img alt="Notion" src="https://github.com/user-attachments/assets/a27a6033-3cb0-4232-a6bb-625e1824517b" width="200px" height="120px"></a>
 
 ### Silver
 
-<a href="https://www.frontend.fyi/?utm_source=motion"><img alt="Frontend.fyi" src="https://github.com/user-attachments/assets/07d23aa5-69db-44a0-849d-90177e6fc817" width="150px" height="100px"></a> <a href="https://statamic.com"><img alt="Statamic" src="https://github.com/user-attachments/assets/5d28f090-bdd9-4b31-b134-fb2b94ca636f" width="150px" height="100px"></a> <a href="https://firecrawl.dev"><img alt="Firecrawl" src="https://github.com/user-attachments/assets/cba90e54-1329-4353-8fba-85beef4d2ee9" width="150px" height="100px"></a> <a href="https://puzzmo.com"><img alt="Puzzmo" src="https://github.com/user-attachments/assets/aa2d5586-e5e2-43b9-8446-db456e4b0758" width="150px" height="100px"></a> <a href="https://buildui.com"><img alt="Build UI" src="https://github.com/user-attachments/assets/024bfcd5-50e8-4b3d-a115-d5c6d6030d1c" width="150px" height="100px"></a> <a href="https://hover.dev"><img alt="Hover" src="https://github.com/user-attachments/assets/4715b555-d2ac-4cb7-9f35-d36d708827b3" width="150px" height="100px"></a>
+<a href="https://www.frontend.fyi/?utm_source=motion"><img alt="Frontend.fyi" src="https://github.com/user-attachments/assets/f16e3eb9-f0bd-4ad1-8049-f079a3d65c69" width="150px" height="100px"></a> <a href="https://firecrawl.dev"><img alt="Firecrawl" src="https://github.com/user-attachments/assets/2c44e7f4-5c2a-4714-9050-1570538665ff" width="150px" height="100px"></a> <a href="https://puzzmo.com"><img alt="Puzzmo" src="https://github.com/user-attachments/assets/e32205a7-3ab1-41ec-8729-a794058fd655" width="150px" height="100px"></a> <a href="https://bolt.new"><img alt="Bolt.new" src="https://github.com/user-attachments/assets/7932d4b2-bb6c-422e-82b9-6ad78a7e3090" width="150px" height="100px"></a>
+
+### Personal sponsors
+
+-   [OlegWock](https://sinja.io)
+-   [Lambert Weller](https://github.com/l-mbert)
+-   [Jake LeBoeuf](https://jklb.wf)
+-   [Han Lee](https://github.com/hahnlee)

packages/motion/src/state/motion-state.ts

@@ -137,17 +137,12 @@ export class MotionState {
     this.element = element
     this.updateOptions(options)
 
+    const shouldDelay = this.options.layoutId && this.visualElement.projection.getStack()?.members.length > 0
     // Mount features in parent-to-child order
     this.featureManager.mount()
     if (!notAnimate && this.options.animate) {
       this.startAnimation?.()
     }
-    if (this.options.layoutId) {
-      mountedLayoutIds.add(this.options.layoutId)
-      frame.render(() => {
-        mountedLayoutIds.clear()
-      })
-    }
   }
 
   clearAnimation() {
@@ -173,28 +168,22 @@ export class MotionState {
   }
 
   unmount(unMountChildren = false) {
-    /**
-     * Unlike React, within the same update cycle, the execution order of unmount and mount depends on the component's order in the component tree.
-     * Here we delay unmount for components with layoutId to ensure unmount executes after mount for layout animations.
-     */
-    const shouldDelay = this.options.layoutId && !mountedLayoutIds.has(this.options.layoutId)
-    const unmount = () => {
-      const unmountState = () => {
-        if (unMountChildren) {
-          Array.from(this.children).reverse().forEach(this.unmountChild)
-        }
-        this.parent?.children?.delete(this)
-        mountedStates.delete(this.element)
-        this.featureManager.unmount()
-        this.visualElement?.unmount()
-        // clear animation
-        this.clearAnimation()
-      }
-      // Delay unmount if needed for layout animations
-      shouldDelay ? Promise.resolve().then(unmountState) : unmountState()
+    const shouldDelay = this.options.layoutId && this.visualElement.projection?.getStack().lead === this.visualElement.projection && this.visualElement.projection.isProjecting()
+    if (shouldDelay) {
+      Promise.resolve().then(() => {
+        this.unmount(unMountChildren)
+      })
+      return
     }
-
-    unmount()
+    if (unMountChildren) {
+      Array.from(this.children).reverse().forEach(this.unmountChild)
+    }
+    this.parent?.children?.delete(this)
+    mountedStates.delete(this.element)
+    this.featureManager.unmount()
+    this.visualElement?.unmount()
+    // clear animation
+    this.clearAnimation()
   }
 
   private unmountChild(child: MotionState) {

playground/nuxt/package.json

@@ -13,7 +13,7 @@
     "motion-number-vue": "latest",
     "motion-plus-vue": "0.1.0",
     "motion-v": "workspace:*",
-    "nuxt": "^3.16.0",
+    "nuxt": "3.15.4",
     "reka-ui": "^2.0.0",
     "vue": "latest",
     "vue-router": "latest"

playground/nuxt/pages/layout-id-tabs/index.vue

@@ -33,7 +33,6 @@ const selectedTab = ref(tabs[0])
             :initial="{ y: 10, opacity: 0 }"
             :animate="{ y: 0, opacity: 1 }"
             :exit="{ y: -10, opacity: 0 }"
-            :transition="{ duration: 3 }"
           >
             {{ selectedTab ? selectedTab.icon : '😋' }}
           </Motion>