[FEATURE] - Resolve variants every render

[itaydafna]

I have an issue where updating the object I pass on the custom prop to the motion.div variants doesn't trigger the expected style change.

I created the following sandbox in order to demonstrate the issue:

https://codesandbox.io/s/framer-motion-stale-custom-fibp5?file=/src/App.js

My expectation is that when I toggle the theme - the circle's on/off colors will immediately change based on the new theme. (from black/white to darkblue/yellow and vice versa).

However, the theme changes are applied only once the animation value is changed (status changes from "on" to "off" etc.) So when I toggle the theme, I'm showing a "stale" theme value until I also toggle the status (on/off).

For the moment I'm using a workaround (also suggested on this corresponding stackoverflow thread) where I update the key of the motion.div upon theme change - thus forcing it to re-render - but this feels a bit hacky.

Is this a bug or is something wrong with how I'm using the api?

Any help would be greatly appreciated.

[mattgperry]

This is currently expected from the way variants are resolved both in the code and as an API spec. A variant is animated to when the animate prop changes. I've changed this to a feature request though as it might well be possible to reconsider this, I just have to properly consider the ramifications.

[mattgperry]

This behaviour isn't going to change but you could build custom resolution by using useAnimation with useEffect

useEffect(() => {
  controls.start("myVariant")
})

[AviKKi]

@mattgperry I wasn't able to find documentations for useAnimated, this states that 'useAnimatedState has been removed.'

Another workaround is to use key attribute that will force re-render the component

<motion.div
   {/* Below line will force re-render component on state change */}
   key={state}               
   variants={variants}
>