Merge pull request #2227 from framer/fix/custom-value

Transform newly-read values
framer · Jul 14, 2023 · df700d2 · df700d2
2 parents bb3fa04 + 48aa31b
commit df700d2
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/packages/framer-motion/src/render/dom/DOMVisualElement.ts b/packages/framer-motion/src/render/dom/DOMVisualElement.ts
@@ -54,7 +54,17 @@ export abstract class DOMVisualElement<
         }
 
         if (isMounted) {
-            checkTargetForNewValues(this, target, origin as any)
+            const newValues = checkTargetForNewValues(
+                this,
+                target,
+                origin as any
+            )
+
+            // If new values have been added, for instance named color values, transform these
+            if (transformValues && newValues) {
+                origin = transformValues(origin as any)
+            }
+
             const parsed = parseDomVariant(this, target, origin, transitionEnd)
             transitionEnd = parsed.transitionEnd
             target = parsed.target

diff --git a/packages/framer-motion/src/render/utils/setters.ts b/packages/framer-motion/src/render/utils/setters.ts
@@ -84,14 +84,14 @@ export function checkTargetForNewValues(
     visualElement: VisualElement,
     target: TargetWithKeyframes,
     origin: ResolvedValues
-) {
+): boolean {
     const newValueKeys = Object.keys(target).filter(
         (key) => !visualElement.hasValue(key)
     )
 
     const numNewValues = newValueKeys.length
 
-    if (!numNewValues) return
+    if (!numNewValues) return false
 
     for (let i = 0; i < numNewValues; i++) {
         const key = newValueKeys[i]
@@ -140,6 +140,8 @@ export function checkTargetForNewValues(
         }
         if (value !== null) visualElement.setBaseTarget(key, value)
     }
+
+    return true
 }
 
 export function getOriginFromTransition(key: string, transition: Transition) {