title: Animate input width from right to left framer motion
body: <p>I'm trying to make my input appears with an animation making its width size going from <code>0</code> to <code>50%</code>. For this, I've used <code>framer-motion</code>. I've managed to make the animation but by default it's growing from the left to the right. Is there any way I could make it change to have it growing from the right to the left ?
  <a href="https://codesandbox.io/embed/eager-booth-b9bnhl?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer">sandbox simple reproduction</a></p>
  <pre class="lang-js prettyprint-override"><code>import { motion } from &quot;framer-motion&quot;;
  import { useState } from &quot;react&quot;;
  
  export default function App() {
    const [toggle, setToggle] = useState(false);
  
    return (
      &lt;div&gt;
        &lt;button onClick={() =&gt; setToggle(!toggle)}&gt;toggle input&lt;/button&gt;
        &lt;div style={{ marginTop: 25 }}&gt;
          {toggle &amp;&amp; (
            &lt;motion.input
              initial={{ width: &quot;0%&quot; }}
              animate={{ width: &quot;50%&quot; }}
              transition={{ duration: 1, origin: 1 }}
            /&gt;
          )}
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>