@thangdevalone/meeting-grid-layout-vue 1.5.7 → 1.5.9

package/README.md

@@ -57,6 +57,8 @@ Wraps the grid and provides layout via `provide`/`inject`.
 | `float-breakpoints`    | `PipBreakpoint[]`                         | -           | Responsive breakpoints for auto-float PiP (see [Responsive PiP](#responsive-pip)) |
 | `pip-index`            | `number`                                  | `1`         | Which participant (0 or 1) is the floating PiP in 2-person mode      |
 | `pin-only`             | `boolean`                                 | `false`     | Mobile/tablet pin-only mode: page 0 = pinned full-screen, page 1+ = others gallery (≤1024px) |
+| `disable-float`        | `boolean`                                 | `false`     | Disable Floating PiP in 2-person mode; shows standard gallery grid instead |
+| `disable-animation`    | `boolean`                                 | `false`     | Disable all spring/transition animations globally; items snap instantly    |
 | `tag`                  | `string`                                  | `'div'`     | Root HTML element tag                                                |
 
 ### `<GridItem>`

package/dist/index.cjs

@@ -173,6 +173,16 @@ const GridContainer = vue.defineComponent({
       type: Boolean,
       default: false
     },
+    /**
+     * Disable all animations globally.
+     * When true, all grid items and float items render without
+     * spring/transition animations. Items snap to positions instantly.
+     * @default false
+     */
+    disableAnimation: {
+      type: Boolean,
+      default: false
+    },
     /** HTML tag to render */
     tag: {
       type: String,
@@ -205,8 +215,9 @@ const GridContainer = vue.defineComponent({
     const grid = useMeetGrid(gridOptions);
     vue.provide(GridContextKey, {
       grid,
-      springPreset: props.springPreset,
-      dimensions
+      springPreset: vue.toRef(props, "springPreset"),
+      dimensions,
+      disableAnimation: vue.toRef(props, "disableAnimation")
     });
     return () => vue.h(
       props.tag,
@@ -253,7 +264,8 @@ const GridItem = vue.defineComponent({
       console.warn("GridItem must be used inside a GridContainer");
       return () => null;
     }
-    const { grid, springPreset, dimensions: containerDimensions } = context;
+    const { grid, springPreset, dimensions: containerDimensions, disableAnimation: containerDisableAnimation } = context;
+    const noAnimation = vue.computed(() => containerDisableAnimation.value || props.disableAnimation);
     const position = vue.computed(() => grid.value.getPosition(props.index));
     const dimensions = vue.computed(() => grid.value.getItemDimensions(props.index));
     const contentDimensions = vue.computed(
@@ -331,9 +343,14 @@ const GridItem = vue.defineComponent({
       ([, w, h2]) => {
         if (isFloat.value && floatInitialized.value && w > 0 && h2 > 0) {
           const pos = getFloatCornerPos(floatAnchor.value);
-          const springCfg = { type: "spring", stiffness: 400, damping: 30 };
-          motionV.animate(x, pos.x, springCfg);
-          motionV.animate(y, pos.y, springCfg);
+          if (noAnimation.value) {
+            x.set(pos.x);
+            y.set(pos.y);
+          } else {
+            const springCfg = { type: "spring", stiffness: 400, damping: 30 };
+            motionV.animate(x, pos.x, springCfg);
+            motionV.animate(y, pos.y, springCfg);
+          }
         }
       }
     );
@@ -342,7 +359,7 @@ const GridItem = vue.defineComponent({
       return props.index === lastVisibleOthersIndex;
     });
     const hiddenCount = vue.computed(() => grid.value.hiddenCount);
-    const springConfig = meetingGridLayoutCore.getSpringConfig(springPreset);
+    const springConfig = vue.computed(() => meetingGridLayoutCore.getSpringConfig(springPreset.value));
     const gridX = motionV.useMotionValue(0);
     const gridY = motionV.useMotionValue(0);
     const gridAnimReady = vue.ref(false);
@@ -351,7 +368,10 @@ const GridItem = vue.defineComponent({
         () => position.value.top,
         () => position.value.left,
         isFloat,
-        isHidden
+        isHidden,
+        () => springConfig.value.stiffness,
+        () => springConfig.value.damping,
+        () => springConfig.value.mass
       ],
       ([, , floating, hidden]) => {
         if (floating || hidden) {
@@ -363,11 +383,15 @@ const GridItem = vue.defineComponent({
           gridX.set(pos.left);
           gridY.set(pos.top);
           gridAnimReady.value = true;
+        } else if (noAnimation.value) {
+          gridX.set(pos.left);
+          gridY.set(pos.top);
         } else {
           const cfg = {
             type: "spring",
-            stiffness: springConfig.stiffness,
-            damping: springConfig.damping
+            stiffness: springConfig.value.stiffness,
+            damping: springConfig.value.damping,
+            mass: springConfig.value.mass
           };
           motionV.animate(gridX, pos.left, cfg);
           motionV.animate(gridY, pos.top, cfg);
@@ -401,9 +425,14 @@ const GridItem = vue.defineComponent({
           const nearestCorner = findFloatNearestCorner(currentX, currentY);
           floatAnchor.value = nearestCorner;
           const snapPos = getFloatCornerPos(nearestCorner);
-          const springCfg = { type: "spring", stiffness: 400, damping: 30 };
-          motionV.animate(x, snapPos.x, springCfg);
-          motionV.animate(y, snapPos.y, springCfg);
+          if (noAnimation.value) {
+            x.set(snapPos.x);
+            y.set(snapPos.y);
+          } else {
+            const springCfg = { type: "spring", stiffness: 400, damping: 30 };
+            motionV.animate(x, snapPos.x, springCfg);
+            motionV.animate(y, snapPos.y, springCfg);
+          }
         };
         return vue.h(
           motionV.motion.div,
@@ -429,8 +458,8 @@ const GridItem = vue.defineComponent({
               x,
               y
             },
-            whileDrag: { cursor: "grabbing", scale: 1.05, boxShadow: "0 8px 32px rgba(0,0,0,0.4)" },
-            transition: { type: "spring", stiffness: 400, damping: 30 },
+            whileDrag: noAnimation.value ? { cursor: "grabbing" } : { cursor: "grabbing", scale: 1.05, boxShadow: "0 8px 32px rgba(0,0,0,0.4)" },
+            transition: noAnimation.value ? { duration: 0 } : { type: "spring", stiffness: 400, damping: 30 },
             "data-grid-index": props.index,
             "data-grid-float": true,
             onDragEnd: handleDragEnd
@@ -440,7 +469,7 @@ const GridItem = vue.defineComponent({
       }
       const itemWidth = dimensions.value.width;
       const itemHeight = dimensions.value.height;
-      if (props.disableAnimation) {
+      if (noAnimation.value) {
         return vue.h(
           props.tag,
           {
@@ -457,18 +486,25 @@ const GridItem = vue.defineComponent({
           slots.default?.(slotProps.value)
         );
       }
+      const transition = noAnimation.value ? { duration: 0 } : {
+        type: "spring",
+        stiffness: springConfig.value.stiffness,
+        damping: springConfig.value.damping,
+        mass: springConfig.value.mass
+      };
       return vue.h(
         motionV.motion.div,
         {
           key: `grid-${props.index}`,
+          initial: { width: itemWidth, height: itemHeight },
+          animate: { width: itemWidth, height: itemHeight },
+          transition,
           style: {
             position: "absolute",
             top: 0,
             left: 0,
             x: gridX,
-            y: gridY,
-            width: `${itemWidth}px`,
-            height: `${itemHeight}px`
+            y: gridY
           },
           "data-grid-index": props.index,
           "data-grid-main": isMain.value
@@ -575,7 +611,7 @@ const FloatingGridItem = vue.defineComponent({
       console.warn("FloatingGridItem must be used inside a GridContainer");
       return () => null;
     }
-    const { dimensions } = context;
+    const { dimensions, disableAnimation: containerDisableAnimation } = context;
     const currentAnchor = vue.ref(props.anchor);
     const effectiveSize = vue.computed(() => {
       if (props.breakpoints && props.breakpoints.length > 0 && dimensions.value.width > 0) {
@@ -645,9 +681,14 @@ const FloatingGridItem = vue.defineComponent({
         if (isInitialized.value && w > 0 && h2 > 0 && newAnchor !== currentAnchor.value) {
           currentAnchor.value = newAnchor;
           const pos = getCornerPosition(newAnchor);
-          const springCfg = { type: "spring", stiffness: 400, damping: 30 };
-          motionV.animate(x, pos.x, springCfg);
-          motionV.animate(y, pos.y, springCfg);
+          if (containerDisableAnimation.value) {
+            x.set(pos.x);
+            y.set(pos.y);
+          } else {
+            const springCfg = { type: "spring", stiffness: 400, damping: 30 };
+            motionV.animate(x, pos.x, springCfg);
+            motionV.animate(y, pos.y, springCfg);
+          }
         }
       }
     );
@@ -656,9 +697,14 @@ const FloatingGridItem = vue.defineComponent({
       () => {
         if (isInitialized.value && containerDimensions.value.width > 0 && containerDimensions.value.height > 0) {
           const pos = getCornerPosition(currentAnchor.value);
-          const springCfg = { type: "spring", stiffness: 400, damping: 30 };
-          motionV.animate(x, pos.x, springCfg);
-          motionV.animate(y, pos.y, springCfg);
+          if (containerDisableAnimation) {
+            x.set(pos.x);
+            y.set(pos.y);
+          } else {
+            const springCfg = { type: "spring", stiffness: 400, damping: 30 };
+            motionV.animate(x, pos.x, springCfg);
+            motionV.animate(y, pos.y, springCfg);
+          }
         }
       }
     );
@@ -683,9 +729,14 @@ const FloatingGridItem = vue.defineComponent({
         currentAnchor.value = nearestCorner;
         emit("anchorChange", nearestCorner);
         const snapPos = getCornerPosition(nearestCorner);
-        const springCfg = { type: "spring", stiffness: 400, damping: 30 };
-        motionV.animate(x, snapPos.x, springCfg);
-        motionV.animate(y, snapPos.y, springCfg);
+        if (containerDisableAnimation.value) {
+          x.set(snapPos.x);
+          y.set(snapPos.y);
+        } else {
+          const springCfg = { type: "spring", stiffness: 400, damping: 30 };
+          motionV.animate(x, snapPos.x, springCfg);
+          motionV.animate(y, snapPos.y, springCfg);
+        }
       };
       return vue.h(
         motionV.motion.div,
@@ -709,8 +760,8 @@ const FloatingGridItem = vue.defineComponent({
             x,
             y
           },
-          whileDrag: { cursor: "grabbing", scale: 1.05, boxShadow: "0 8px 32px rgba(0,0,0,0.4)" },
-          transition: { type: "spring", stiffness: 400, damping: 30 },
+          whileDrag: containerDisableAnimation.value ? { cursor: "grabbing" } : { cursor: "grabbing", scale: 1.05, boxShadow: "0 8px 32px rgba(0,0,0,0.4)" },
+          transition: containerDisableAnimation.value ? { duration: 0 } : { type: "spring", stiffness: 400, damping: 30 },
           onDragEnd: handleDragEnd
         },
         slots.default?.()

package/dist/index.d.cts

@@ -20,20 +20,24 @@ declare function useMeetGrid(options: Ref<MeetGridOptions> | ComputedRef<MeetGri
  * Composable to get animation configuration for Motion
  */
 declare function useGridAnimation(preset?: SpringPreset): ComputedRef<{
-    stiffness: 400;
-    damping: 30;
+    stiffness: 800;
+    damping: 35;
+    mass: 0.5;
     type: "spring";
 } | {
-    stiffness: 300;
-    damping: 30;
+    stiffness: 200;
+    damping: 26;
+    mass: 1;
     type: "spring";
 } | {
-    stiffness: 200;
-    damping: 25;
+    stiffness: 60;
+    damping: 14;
+    mass: 1.8;
     type: "spring";
 } | {
-    stiffness: 400;
-    damping: 15;
+    stiffness: 500;
+    damping: 8;
+    mass: 0.6;
     type: "spring";
 }>;
 /**
@@ -48,8 +52,9 @@ declare function useGridItemPosition(grid: ComputedRef<MeetGridResult>, index: R
 
 interface GridContextValue {
     grid: ComputedRef<MeetGridResult>;
-    springPreset: SpringPreset;
+    springPreset: Ref<SpringPreset>;
     dimensions: Ref<GridDimensions>;
+    disableAnimation: Ref<boolean>;
 }
 declare const GridContextKey: InjectionKey<GridContextValue>;
 declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
@@ -170,6 +175,16 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Disable all animations globally.
+     * When true, all grid items and float items render without
+     * spring/transition animations. Items snap to positions instantly.
+     * @default false
+     */
+    disableAnimation: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     /** HTML tag to render */
     tag: {
         type: StringConstructor;
@@ -295,6 +310,16 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Disable all animations globally.
+     * When true, all grid items and float items render without
+     * spring/transition animations. Items snap to positions instantly.
+     * @default false
+     */
+    disableAnimation: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     /** HTML tag to render */
     tag: {
         type: StringConstructor;
@@ -318,6 +343,7 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
     pipIndex: number;
     pinOnly: boolean;
     disableFloat: boolean;
+    disableAnimation: boolean;
     tag: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 declare const GridItem: vue.DefineComponent<vue.ExtractPropTypes<{
@@ -365,8 +391,8 @@ declare const GridItem: vue.DefineComponent<vue.ExtractPropTypes<{
         default: string;
     };
 }>> & Readonly<{}>, {
-    tag: string;
     disableAnimation: boolean;
+    tag: string;
     itemAspectRatio: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 declare const GridOverlay: vue.DefineComponent<vue.ExtractPropTypes<{

package/dist/index.d.mts

@@ -20,20 +20,24 @@ declare function useMeetGrid(options: Ref<MeetGridOptions> | ComputedRef<MeetGri
  * Composable to get animation configuration for Motion
  */
 declare function useGridAnimation(preset?: SpringPreset): ComputedRef<{
-    stiffness: 400;
-    damping: 30;
+    stiffness: 800;
+    damping: 35;
+    mass: 0.5;
     type: "spring";
 } | {
-    stiffness: 300;
-    damping: 30;
+    stiffness: 200;
+    damping: 26;
+    mass: 1;
     type: "spring";
 } | {
-    stiffness: 200;
-    damping: 25;
+    stiffness: 60;
+    damping: 14;
+    mass: 1.8;
     type: "spring";
 } | {
-    stiffness: 400;
-    damping: 15;
+    stiffness: 500;
+    damping: 8;
+    mass: 0.6;
     type: "spring";
 }>;
 /**
@@ -48,8 +52,9 @@ declare function useGridItemPosition(grid: ComputedRef<MeetGridResult>, index: R
 
 interface GridContextValue {
     grid: ComputedRef<MeetGridResult>;
-    springPreset: SpringPreset;
+    springPreset: Ref<SpringPreset>;
     dimensions: Ref<GridDimensions>;
+    disableAnimation: Ref<boolean>;
 }
 declare const GridContextKey: InjectionKey<GridContextValue>;
 declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
@@ -170,6 +175,16 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Disable all animations globally.
+     * When true, all grid items and float items render without
+     * spring/transition animations. Items snap to positions instantly.
+     * @default false
+     */
+    disableAnimation: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     /** HTML tag to render */
     tag: {
         type: StringConstructor;
@@ -295,6 +310,16 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Disable all animations globally.
+     * When true, all grid items and float items render without
+     * spring/transition animations. Items snap to positions instantly.
+     * @default false
+     */
+    disableAnimation: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     /** HTML tag to render */
     tag: {
         type: StringConstructor;
@@ -318,6 +343,7 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
     pipIndex: number;
     pinOnly: boolean;
     disableFloat: boolean;
+    disableAnimation: boolean;
     tag: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 declare const GridItem: vue.DefineComponent<vue.ExtractPropTypes<{
@@ -365,8 +391,8 @@ declare const GridItem: vue.DefineComponent<vue.ExtractPropTypes<{
         default: string;
     };
 }>> & Readonly<{}>, {
-    tag: string;
     disableAnimation: boolean;
+    tag: string;
     itemAspectRatio: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 declare const GridOverlay: vue.DefineComponent<vue.ExtractPropTypes<{

package/dist/index.d.ts

@@ -20,20 +20,24 @@ declare function useMeetGrid(options: Ref<MeetGridOptions> | ComputedRef<MeetGri
  * Composable to get animation configuration for Motion
  */
 declare function useGridAnimation(preset?: SpringPreset): ComputedRef<{
-    stiffness: 400;
-    damping: 30;
+    stiffness: 800;
+    damping: 35;
+    mass: 0.5;
     type: "spring";
 } | {
-    stiffness: 300;
-    damping: 30;
+    stiffness: 200;
+    damping: 26;
+    mass: 1;
     type: "spring";
 } | {
-    stiffness: 200;
-    damping: 25;
+    stiffness: 60;
+    damping: 14;
+    mass: 1.8;
     type: "spring";
 } | {
-    stiffness: 400;
-    damping: 15;
+    stiffness: 500;
+    damping: 8;
+    mass: 0.6;
     type: "spring";
 }>;
 /**
@@ -48,8 +52,9 @@ declare function useGridItemPosition(grid: ComputedRef<MeetGridResult>, index: R
 
 interface GridContextValue {
     grid: ComputedRef<MeetGridResult>;
-    springPreset: SpringPreset;
+    springPreset: Ref<SpringPreset>;
     dimensions: Ref<GridDimensions>;
+    disableAnimation: Ref<boolean>;
 }
 declare const GridContextKey: InjectionKey<GridContextValue>;
 declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
@@ -170,6 +175,16 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Disable all animations globally.
+     * When true, all grid items and float items render without
+     * spring/transition animations. Items snap to positions instantly.
+     * @default false
+     */
+    disableAnimation: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     /** HTML tag to render */
     tag: {
         type: StringConstructor;
@@ -295,6 +310,16 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Disable all animations globally.
+     * When true, all grid items and float items render without
+     * spring/transition animations. Items snap to positions instantly.
+     * @default false
+     */
+    disableAnimation: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     /** HTML tag to render */
     tag: {
         type: StringConstructor;
@@ -318,6 +343,7 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
     pipIndex: number;
     pinOnly: boolean;
     disableFloat: boolean;
+    disableAnimation: boolean;
     tag: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 declare const GridItem: vue.DefineComponent<vue.ExtractPropTypes<{
@@ -365,8 +391,8 @@ declare const GridItem: vue.DefineComponent<vue.ExtractPropTypes<{
         default: string;
     };
 }>> & Readonly<{}>, {
-    tag: string;
     disableAnimation: boolean;
+    tag: string;
     itemAspectRatio: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 declare const GridOverlay: vue.DefineComponent<vue.ExtractPropTypes<{

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import { createMeetGrid, getSpringConfig, resolveFloatSize } from '@thangdevalone/meeting-grid-layout-core';
 export { createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, springPresets } from '@thangdevalone/meeting-grid-layout-core';
 import { useResizeObserver } from '@vueuse/core';
-import { ref, onMounted, computed, defineComponent, provide, h, inject, watch } from 'vue';
+import { ref, onMounted, computed, defineComponent, provide, toRef, h, inject, watch } from 'vue';
 import { useMotionValue, animate, motion } from 'motion-v';
 
 function useGridDimensions(elementRef) {
@@ -172,6 +172,16 @@ const GridContainer = defineComponent({
       type: Boolean,
       default: false
     },
+    /**
+     * Disable all animations globally.
+     * When true, all grid items and float items render without
+     * spring/transition animations. Items snap to positions instantly.
+     * @default false
+     */
+    disableAnimation: {
+      type: Boolean,
+      default: false
+    },
     /** HTML tag to render */
     tag: {
       type: String,
@@ -204,8 +214,9 @@ const GridContainer = defineComponent({
     const grid = useMeetGrid(gridOptions);
     provide(GridContextKey, {
       grid,
-      springPreset: props.springPreset,
-      dimensions
+      springPreset: toRef(props, "springPreset"),
+      dimensions,
+      disableAnimation: toRef(props, "disableAnimation")
     });
     return () => h(
       props.tag,
@@ -252,7 +263,8 @@ const GridItem = defineComponent({
       console.warn("GridItem must be used inside a GridContainer");
       return () => null;
     }
-    const { grid, springPreset, dimensions: containerDimensions } = context;
+    const { grid, springPreset, dimensions: containerDimensions, disableAnimation: containerDisableAnimation } = context;
+    const noAnimation = computed(() => containerDisableAnimation.value || props.disableAnimation);
     const position = computed(() => grid.value.getPosition(props.index));
     const dimensions = computed(() => grid.value.getItemDimensions(props.index));
     const contentDimensions = computed(
@@ -330,9 +342,14 @@ const GridItem = defineComponent({
       ([, w, h2]) => {
         if (isFloat.value && floatInitialized.value && w > 0 && h2 > 0) {
           const pos = getFloatCornerPos(floatAnchor.value);
-          const springCfg = { type: "spring", stiffness: 400, damping: 30 };
-          animate(x, pos.x, springCfg);
-          animate(y, pos.y, springCfg);
+          if (noAnimation.value) {
+            x.set(pos.x);
+            y.set(pos.y);
+          } else {
+            const springCfg = { type: "spring", stiffness: 400, damping: 30 };
+            animate(x, pos.x, springCfg);
+            animate(y, pos.y, springCfg);
+          }
         }
       }
     );
@@ -341,7 +358,7 @@ const GridItem = defineComponent({
       return props.index === lastVisibleOthersIndex;
     });
     const hiddenCount = computed(() => grid.value.hiddenCount);
-    const springConfig = getSpringConfig(springPreset);
+    const springConfig = computed(() => getSpringConfig(springPreset.value));
     const gridX = useMotionValue(0);
     const gridY = useMotionValue(0);
     const gridAnimReady = ref(false);
@@ -350,7 +367,10 @@ const GridItem = defineComponent({
         () => position.value.top,
         () => position.value.left,
         isFloat,
-        isHidden
+        isHidden,
+        () => springConfig.value.stiffness,
+        () => springConfig.value.damping,
+        () => springConfig.value.mass
       ],
       ([, , floating, hidden]) => {
         if (floating || hidden) {
@@ -362,11 +382,15 @@ const GridItem = defineComponent({
           gridX.set(pos.left);
           gridY.set(pos.top);
           gridAnimReady.value = true;
+        } else if (noAnimation.value) {
+          gridX.set(pos.left);
+          gridY.set(pos.top);
         } else {
           const cfg = {
             type: "spring",
-            stiffness: springConfig.stiffness,
-            damping: springConfig.damping
+            stiffness: springConfig.value.stiffness,
+            damping: springConfig.value.damping,
+            mass: springConfig.value.mass
           };
           animate(gridX, pos.left, cfg);
           animate(gridY, pos.top, cfg);
@@ -400,9 +424,14 @@ const GridItem = defineComponent({
           const nearestCorner = findFloatNearestCorner(currentX, currentY);
           floatAnchor.value = nearestCorner;
           const snapPos = getFloatCornerPos(nearestCorner);
-          const springCfg = { type: "spring", stiffness: 400, damping: 30 };
-          animate(x, snapPos.x, springCfg);
-          animate(y, snapPos.y, springCfg);
+          if (noAnimation.value) {
+            x.set(snapPos.x);
+            y.set(snapPos.y);
+          } else {
+            const springCfg = { type: "spring", stiffness: 400, damping: 30 };
+            animate(x, snapPos.x, springCfg);
+            animate(y, snapPos.y, springCfg);
+          }
         };
         return h(
           motion.div,
@@ -428,8 +457,8 @@ const GridItem = defineComponent({
               x,
               y
             },
-            whileDrag: { cursor: "grabbing", scale: 1.05, boxShadow: "0 8px 32px rgba(0,0,0,0.4)" },
-            transition: { type: "spring", stiffness: 400, damping: 30 },
+            whileDrag: noAnimation.value ? { cursor: "grabbing" } : { cursor: "grabbing", scale: 1.05, boxShadow: "0 8px 32px rgba(0,0,0,0.4)" },
+            transition: noAnimation.value ? { duration: 0 } : { type: "spring", stiffness: 400, damping: 30 },
             "data-grid-index": props.index,
             "data-grid-float": true,
             onDragEnd: handleDragEnd
@@ -439,7 +468,7 @@ const GridItem = defineComponent({
       }
       const itemWidth = dimensions.value.width;
       const itemHeight = dimensions.value.height;
-      if (props.disableAnimation) {
+      if (noAnimation.value) {
         return h(
           props.tag,
           {
@@ -456,18 +485,25 @@ const GridItem = defineComponent({
           slots.default?.(slotProps.value)
         );
       }
+      const transition = noAnimation.value ? { duration: 0 } : {
+        type: "spring",
+        stiffness: springConfig.value.stiffness,
+        damping: springConfig.value.damping,
+        mass: springConfig.value.mass
+      };
       return h(
         motion.div,
         {
           key: `grid-${props.index}`,
+          initial: { width: itemWidth, height: itemHeight },
+          animate: { width: itemWidth, height: itemHeight },
+          transition,
           style: {
             position: "absolute",
             top: 0,
             left: 0,
             x: gridX,
-            y: gridY,
-            width: `${itemWidth}px`,
-            height: `${itemHeight}px`
+            y: gridY
           },
           "data-grid-index": props.index,
           "data-grid-main": isMain.value
@@ -574,7 +610,7 @@ const FloatingGridItem = defineComponent({
       console.warn("FloatingGridItem must be used inside a GridContainer");
       return () => null;
     }
-    const { dimensions } = context;
+    const { dimensions, disableAnimation: containerDisableAnimation } = context;
     const currentAnchor = ref(props.anchor);
     const effectiveSize = computed(() => {
       if (props.breakpoints && props.breakpoints.length > 0 && dimensions.value.width > 0) {
@@ -644,9 +680,14 @@ const FloatingGridItem = defineComponent({
         if (isInitialized.value && w > 0 && h2 > 0 && newAnchor !== currentAnchor.value) {
           currentAnchor.value = newAnchor;
           const pos = getCornerPosition(newAnchor);
-          const springCfg = { type: "spring", stiffness: 400, damping: 30 };
-          animate(x, pos.x, springCfg);
-          animate(y, pos.y, springCfg);
+          if (containerDisableAnimation.value) {
+            x.set(pos.x);
+            y.set(pos.y);
+          } else {
+            const springCfg = { type: "spring", stiffness: 400, damping: 30 };
+            animate(x, pos.x, springCfg);
+            animate(y, pos.y, springCfg);
+          }
         }
       }
     );
@@ -655,9 +696,14 @@ const FloatingGridItem = defineComponent({
       () => {
         if (isInitialized.value && containerDimensions.value.width > 0 && containerDimensions.value.height > 0) {
           const pos = getCornerPosition(currentAnchor.value);
-          const springCfg = { type: "spring", stiffness: 400, damping: 30 };
-          animate(x, pos.x, springCfg);
-          animate(y, pos.y, springCfg);
+          if (containerDisableAnimation) {
+            x.set(pos.x);
+            y.set(pos.y);
+          } else {
+            const springCfg = { type: "spring", stiffness: 400, damping: 30 };
+            animate(x, pos.x, springCfg);
+            animate(y, pos.y, springCfg);
+          }
         }
       }
     );
@@ -682,9 +728,14 @@ const FloatingGridItem = defineComponent({
         currentAnchor.value = nearestCorner;
         emit("anchorChange", nearestCorner);
         const snapPos = getCornerPosition(nearestCorner);
-        const springCfg = { type: "spring", stiffness: 400, damping: 30 };
-        animate(x, snapPos.x, springCfg);
-        animate(y, snapPos.y, springCfg);
+        if (containerDisableAnimation.value) {
+          x.set(snapPos.x);
+          y.set(snapPos.y);
+        } else {
+          const springCfg = { type: "spring", stiffness: 400, damping: 30 };
+          animate(x, snapPos.x, springCfg);
+          animate(y, snapPos.y, springCfg);
+        }
       };
       return h(
         motion.div,
@@ -708,8 +759,8 @@ const FloatingGridItem = defineComponent({
             x,
             y
           },
-          whileDrag: { cursor: "grabbing", scale: 1.05, boxShadow: "0 8px 32px rgba(0,0,0,0.4)" },
-          transition: { type: "spring", stiffness: 400, damping: 30 },
+          whileDrag: containerDisableAnimation.value ? { cursor: "grabbing" } : { cursor: "grabbing", scale: 1.05, boxShadow: "0 8px 32px rgba(0,0,0,0.4)" },
+          transition: containerDisableAnimation.value ? { duration: 0 } : { type: "spring", stiffness: 400, damping: 30 },
           onDragEnd: handleDragEnd
         },
         slots.default?.()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thangdevalone/meeting-grid-layout-vue",
-  "version": "1.5.7",
+  "version": "1.5.9",
   "description": "Vue 3 integration for meeting-grid-layout with Motion animations",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -43,7 +43,7 @@
   "dependencies": {
     "@vueuse/core": "^10.7.0",
     "motion-v": "^1.0.0",
-    "@thangdevalone/meeting-grid-layout-core": "1.5.7"
+    "@thangdevalone/meeting-grid-layout-core": "1.5.9"
   },
   "devDependencies": {
     "vue": "^3.4.0",