Upgrade framer-motion to motion (#270)

* upgrade motion

* fix port position off

* release

Author: amcdnl

CHANGELOG.md

@@ -1,3 +1,7 @@
+# 5.3.2 - 1/17/25
+- [chore] upgrade framer-motion to motion
+- [chore] upgrade reablocks
+
 # 5.3.1 - 7/11/24
 - [improvement] Update pan drag cursor #260
 
@@ -299,4 +303,4 @@
 - [Feature] Undo Redo Hook
 
 # 2.4.5 - 12/16/20
-- [Feature] Add adjustable padding for nested nodes and add storybook story for custom nested nodes #30
+- [Feature] Add adjustable padding for nested nodes and add storybook story for custom nested nodes #30

docs/tools/templates/reaflow-codesandbox-template/package.json

@@ -4,7 +4,7 @@
   "description": "",
   "main": "src/index.js",
   "dependencies": {
-    "framer-motion": "^2.1.2",
+    "motion": "^11.18.0",
     "react": "latest",
     "react-dom": "latest",
     "react-scripts": "3.0.1",

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "reaflow",
-  "version": "5.3.1",
+  "version": "5.3.2",
   "description": "Node-based Visualizations for React",
   "scripts": {
     "build": "vite build --mode library",
@@ -54,11 +54,11 @@
     "d3-shape": "^3.0.1",
     "elkjs": "^0.8.2",
     "ellipsize": "^0.2.0",
-    "framer-motion": "^11.0.6",
+    "motion": "^11.18.0",
     "kld-affine": "^2.1.1",
     "kld-intersections": "^0.7.0",
     "p-cancelable": "^3.0.0",
-    "reablocks": "^8.0.3",
+    "reablocks": "^8.7.4",
     "react-cool-dimensions": "^2.0.7",
     "react-fast-compare": "^3.2.2",
     "react-use-gesture": "^8.0.1",

package.json

@@ -9,7 +9,7 @@ import { CanvasPosition, EdgeData, NodeData, PortData } from './types';
 import classNames from 'classnames';
 import { CanvasProvider, useCanvas } from './utils/CanvasProvider';
 import { getDragNodeData } from './utils/helpers';
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 import { ZoomResult } from './utils/useZoom';
 import css from './Canvas.module.css';
 
@@ -327,17 +327,17 @@ const InternalCanvas: FC<CanvasProps & { ref?: Ref<CanvasRef> }> = forwardRef(({
             scale: zoom,
             transition: animated
               ? {
-                  velocity: 100,
-                  translateX: { duration: mount.current ? 0.3 : 0 },
-                  translateY: { duration: mount.current ? 0.3 : 0 },
-                  opacity: { duration: 0.8 },
-                  when: 'beforeChildren'
-                }
+                velocity: 100,
+                translateX: { duration: mount.current ? 0.3 : 0 },
+                translateY: { duration: mount.current ? 0.3 : 0 },
+                opacity: { duration: 0.8 },
+                when: 'beforeChildren'
+              }
               : {
-                  type: false,
-                  duration: 0,
-                  when: 'beforeChildren'
-                }
+                type: false,
+                duration: 0,
+                when: 'beforeChildren'
+              }
           }}
         >
           {layout?.children?.map(({ children, ...n }) => {
@@ -367,11 +367,15 @@ const InternalCanvas: FC<CanvasProps & { ref?: Ref<CanvasRef> }> = forwardRef(({
               {ports?.length > 0 && (
                 <motion.g
                   key={n.id}
+                  initial={{
+                    translateX: n.x,
+                    translateY: n.y
+                  }}
                   animate={{
                     translateX: n.x,
-                    translateY: n.y,
-                    transition: { duration: 0 }
+                    translateY: n.y
                   }}
+                  transition={{ duration: 0 }}
                 >
                   {ports.map((port, index) => (
                     <use key={index} xlinkHref={`#${id}-node-${n.id}-port-${port.id}`} style={{ pointerEvents: 'none' }} />