Update animate prop of the motion component

It works with css variables as well: animate={{ backgroundColor: 'var(--action-bg)' }}

Enter Animation: When a motion component is first created, it will automatically animate to the values in animate if they are different from those initially rendered, which you can either do via CSS or via the initial prop.

Exit Animation: Check out AnimatePresence component. This is needed since the react component is removed immediately on unmount. AnimatePresence makes sure that the exit animation happens before the unmount.