transitionFrom

dev/package.json

@@ -1,15 +1,15 @@
 {
     "name": "framer-motion--dev",
-    "version": "10.18.0",
+    "version": "10.19.0-alpha.0",
     "private": true,
     "scripts": {
         "dev": "webpack serve --config ./webpack/config.js --hot"
     },
     "dependencies": {
         "@react-three/drei": "^7.27.3",
         "@react-three/fiber": "^8.2.2",
-        "framer-motion": "^10.18.0",
-        "framer-motion-3d": "^10.18.0",
+        "framer-motion": "^10.19.0-alpha.0",
+        "framer-motion-3d": "^10.19.0-alpha.0",
         "path-browserify": "^1.0.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",

lerna.json

@@ -1,5 +1,5 @@
 {
-    "version": "10.18.0",
+    "version": "10.19.0-alpha.0",
     "packages": [
         "packages/*"
     ],

packages/framer-motion-3d/package.json

@@ -1,6 +1,6 @@
 {
     "name": "framer-motion-3d",
-    "version": "10.18.0",
+    "version": "10.19.0-alpha.0",
     "description": "A simple and powerful React animation library for @react-three/fiber",
     "main": "dist/cjs/index.js",
     "module": "dist/es/index.mjs",
@@ -46,7 +46,7 @@
         "postpublish": "git push --tags"
     },
     "dependencies": {
-        "framer-motion": "^10.18.0",
+        "framer-motion": "^10.19.0-alpha.0",
         "react-merge-refs": "^2.0.1"
     },
     "peerDependencies": {
@@ -60,5 +60,5 @@
         "@react-three/test-renderer": "^9.0.0",
         "@rollup/plugin-commonjs": "^22.0.1"
     },
-    "gitHead": "75992e6edcd37344df01c3cb772bc70580e68515"
+    "gitHead": "1e046fc053585ac09da43b8c8672de2b88b16e03"
 }

packages/framer-motion-3d/src/render/create-visual-element.ts

@@ -44,10 +44,11 @@ export class ThreeVisualElement extends VisualElement<
     makeTargetAnimatableFromInstance({
         transition,
         transitionEnd,
+        transitionFrom,
         ...target
     }: TargetAndTransition) {
         checkTargetForNewValues(this, target, {})
-        return { ...target, transition, transitionEnd }
+        return { ...target, transition, transitionFrom, transitionEnd }
     }
 
     removeValueFromRenderState() {}

packages/framer-motion/package.json

@@ -1,6 +1,6 @@
 {
     "name": "framer-motion",
-    "version": "10.18.0",
+    "version": "10.19.0-alpha.0",
     "description": "A simple and powerful JavaScript animation library",
     "main": "dist/cjs/index.js",
     "module": "dist/es/index.mjs",
@@ -47,7 +47,7 @@
         "test": "yarn test-server && yarn test-client",
         "test-ci": "yarn test",
         "test-client": "jest --config jest.config.json --max-workers=2",
-        "test-server": "jest --config jest.config.ssr.json ",
+        "test-server": "jest --config jest.config.ssr.json",
         "test-watch": "jest --watch --coverage --coverageReporters=lcov --config jest.config.json",
         "test-appear": "yarn run collect-appear-tests && start-server-and-test 'pushd ../../; python -m SimpleHTTPServer; popd' http://0.0.0.0:8000 'cypress run -s cypress/integration/appear.chrome.ts --config baseUrl=http://localhost:8000/'",
         "test-projection": "yarn run collect-projection-tests && start-server-and-test 'pushd ../../; python -m SimpleHTTPServer; popd' http://0.0.0.0:8000 'cypress run -s cypress/integration/projection.chrome.ts --config baseUrl=http://localhost:8000/'",
@@ -85,36 +85,36 @@
     "bundlesize": [
         {
             "path": "./dist/size-rollup-motion.js",
-            "maxSize": "31.15 kB"
+            "maxSize": "31.3 kB"
         },
         {
             "path": "./dist/size-rollup-m.js",
-            "maxSize": "5.33 kB"
+            "maxSize": "5.34 kB"
         },
         {
             "path": "./dist/size-rollup-dom-animation.js",
-            "maxSize": "15.2 kB"
+            "maxSize": "15.25 kB"
         },
         {
             "path": "./dist/size-rollup-dom-max.js",
-            "maxSize": "26.6 kB"
+            "maxSize": "26.8 kB"
         },
         {
             "path": "./dist/size-rollup-animate.js",
-            "maxSize": "16.52 kB"
+            "maxSize": "16.6 kB"
         },
         {
             "path": "./dist/size-webpack-m.js",
-            "maxSize": "5.45 kB"
+            "maxSize": "5.5 kB"
         },
         {
             "path": "./dist/size-webpack-dom-animation.js",
-            "maxSize": "19.75 kB"
+            "maxSize": "19.9 kB"
         },
         {
             "path": "./dist/size-webpack-dom-max.js",
-            "maxSize": "31.9 kB"
+            "maxSize": "32.1 kB"
         }
     ],
-    "gitHead": "75992e6edcd37344df01c3cb772bc70580e68515"
+    "gitHead": "1e046fc053585ac09da43b8c8672de2b88b16e03"
 }

packages/framer-motion/src/animation/hooks/use-animated-state.ts

@@ -50,11 +50,12 @@ class StateVisualElement extends VisualElement<
     makeTargetAnimatableFromInstance({
         transition,
         transitionEnd,
+        transitionFrom,
         ...target
     }: TargetAndTransition) {
         const origin = getOrigin(target as any, transition || {}, this)
         checkTargetForNewValues(this, target, origin as any)
-        return { transition, transitionEnd, ...target }
+        return { transition, transitionEnd, transitionFrom, ...target }
     }
 }
 

packages/framer-motion/src/animation/interfaces/types.ts

@@ -5,5 +5,5 @@ export type VisualElementAnimationOptions = {
     delay?: number
     transitionOverride?: Transition
     custom?: any
-    type?: AnimationType
+    type?: AnimationType | "initial"
 }

packages/framer-motion/src/animation/interfaces/visual-element-target.ts

@@ -1,7 +1,7 @@
 import { transformProps } from "../../render/html/utils/transform"
 import type { AnimationTypeState } from "../../render/utils/animation-state"
 import type { VisualElement } from "../../render/VisualElement"
-import type { Target, TargetAndTransition } from "../../types"
+import type { Target, TargetAndTransition, Transition } from "../../types"
 import { optimizedAppearDataAttribute } from "../optimized-appear/data-id"
 import type { VisualElementAnimationOptions } from "./types"
 import { animateMotionValue } from "./motion-value"
@@ -48,6 +48,7 @@ export function animateTarget(
 ): AnimationPlaybackControls[] {
     let {
         transition = visualElement.getDefaultTransition(),
+        transitionFrom,
         transitionEnd,
         ...target
     } = visualElement.makeTargetAnimatable(definition)
@@ -76,10 +77,25 @@ export function animateTarget(
             continue
         }
 
+        let transitionFromType: Transition | undefined
+        if (transitionFrom) {
+            if (value.currentAnimationType) {
+                transitionFromType = transitionFrom[value.currentAnimationType]
+            } else {
+                // This is the first time the value has been animated.
+                const initialType =
+                    visualElement.getProps().initial || type === "animate"
+                        ? "initial"
+                        : "animate"
+
+                transitionFromType = transitionFrom[initialType]
+            }
+        }
+
         const valueTransition = {
             delay,
             elapsed: 0,
-            ...getValueTransition(transition || {}, key),
+            ...getValueTransition(transitionFromType || transition || {}, key),
         }
 
         /**
@@ -138,6 +154,8 @@ export function animateTarget(
             )
         )
 
+        value.currentAnimationType = type || "animate"
+
         const animation = value.animation!
 
         if (isWillChangeMotionValue(willChange)) {