[FEATURE] Dynamic controls.start should accept variant labels

[zeckdude]

1. Read the FAQs 👇

2. Describe the bug

When passing custom property to control, you can't return a variant string. I am sending a value via the custom prop so I can use that to affect logic in the control as to what styles to apply. However, I want to use a variant string instead of an object with the styles. It doesn't like that.

const ImperativeAnimationsButtonDemo = () => {
  const controls = useAnimation();

  const variants = {
    whenTrue: {
      backgroundColor: '#FFC0CB' // pink
    },
    whenFalse: {
      backgroundColor: '#0000FF' // blue
    },
  }

  useEffect(() => {
    controls.start(isTrue => isTrue ? 'whenTrue' : 'whenFalse');
  }, [])

  return (
    <motion.button
      variants={variants}
      custom={true}
      animate={controls}
    >
      Button
    </motion.button>
  );
}

This produces the following error:

You are trying to animate 0 from "0" to w. "0" is not an animatable value - to enable this animation set 0 to a value animatable to w via the style property.

You are trying to animate 1 from "0" to h. "0" is not an animatable value - to enable this animation set 0 to a value animatable to h via the style property.

You are trying to animate 2 from "0" to e. "0" is not an animatable value - to enable this animation set 0 to a value animatable to e via the style property.

You are trying to animate 3 from "0" to n. "0" is not an animatable value - to enable this animation set 0 to a value animatable to n via the style property.

You are trying to animate 4 from "0" to T. "0" is not an animatable value - to enable this animation set 0 to a value animatable to T via the style property.

You are trying to animate 5 from "0" to r. "0" is not an animatable value - to enable this animation set 0 to a value animatable to r via the style property.

You are trying to animate 6 from "0" to u. "0" is not an animatable value - to enable this animation set 0 to a value animatable to u via the style property.

You are trying to animate 7 from "0" to e. "0" is not an animatable value - to enable this animation set 0 to a value animatable to e via the style property.

Error: Failed to set an indexed property on 'CSSStyleDeclaration': Index property setter is not supported.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

https://stackblitz.com/edit/framer-motion-imperative-return-variant

4. Steps to reproduce

Steps to reproduce the behavior:

1. Open the stackblitz link

5. Expected behavior

The callback function should be able to return a string for a variant as well as an object of styles

I was able to make it work using the following line, but I would prefer to return strings as is customary when using variant with controls (without the callback).

controls.start(isTrue => {
  return isTrue ? variants.whenTrue : variants.whenFalse;
});

If this is not a bug, then I would like for it to be feature request please.

6. Video or screenshots

None

7. Environment details

Max OSX

FAQs

AnimatePresence isn't working

N/A

[mattgperry]

Are you sure the bug isn’t the missing # hash from the color tokens

…

On Thu, 2 Apr 2020 at 23:25, Chris Seckler ***@***.***> wrote: *1. Read the FAQs <#m_-2784499532525225331_faqs> 👇* *2. Describe the bug* When passing custom property to control, you can't return a variant string. I am sending a value via the custom prop so I can use that to affect logic in the control as to what styles to apply. However, I want to use a variant string instead of an object with the styles. It doesn't like that. const ImperativeAnimationsButtonDemo = () => { const controls = useAnimation(); const variants = { whenTrue: { backgroundColor: 'FFC0CB' // pink }, whenFalse: { backgroundColor: '0000FF' // blue }, } useEffect(() => { controls.start(isTrue => isTrue ? 'whenTrue' : 'whenFalse'); }, []) return ( <motion.button variants={variants} custom={true} animate={controls} > Button </motion.button> ); } *3. IMPORTANT: Provide a CodeSandbox reproduction of the bug* https://stackblitz.com/edit/framer-motion-imperative-return-variant *4. Steps to reproduce* Steps to reproduce the behavior: 1. Open the stackblitz link *5. Expected behavior* The callback function should be able to return a string for a variant as well as an object of styles I was able to make it work using the following line, but I would prefer to return strings as is customary when using variant with controls (without the callback). controls.start(isTrue => { return isTrue ? variants.whenTrue : variants.whenFalse; }); If this is not a bug, then I would like for it to be feature request please. *6. Video or screenshots* None *7. Environment details* Max OSX FAQs AnimatePresence isn't working N/A — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#503>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AB34WKVB3AZHE2ONKVX6JDDRKT7EBANCNFSM4L25HLXQ> .

[zeckdude]

Hi Matt, first of all, you have an amazing library. Your API is pretty easy to understand so great job!

Good catch on the hash but I just updated the stackblitz link and it is still not working. :(

[dminkovsky]

I think the issue here is that with animation controls, you need to set initial state with initial={}. Otherwise, when you attempt to animate imperatively, popmotion doesn't have from state to perform calculations.

[mattgperry]

The problem: resolveVariantFromProps either resolves a string, or a function, but doesn't resolve a function => string