title: How to move plane icon with framer motion?
body: <p>I have a react paper plane icon that I would like to make a cool effect by making it travel around the HTML document reaching the final position which is the menu button at the top.</p>
  <p>This is how my react component called <code>NavPlane</code> looks like:</p>
  <pre><code>import React, { Component, useEffect } from &quot;react&quot;;
  import { useCycle } from &quot;framer-motion&quot;;
  import { FaPaperPlane } from &quot;react-icons/fa&quot;;
  import { motion } from &quot;framer-motion&quot;;
  
  const PlaneVariants = {
    animationOne: {
      x: 370,
      y: 250,
      transition: { ease: [0.17, 0.67, 0.83, 0.67] },
    },
    animationTwo: {
      x: 140,
      y: 150,
      transition: { duration: 1.0 },
    },
    animationThree: {
      x: 170,
      y: 200,
      transition: { duration: 1.0 },
    },
  };
  export default function NavPlane() {
    const [animation, cycleAnimation] = useCycle(
      &quot;animationOne&quot;,
      &quot;animationTwo&quot;,
      &quot;animationThree&quot;
    );
    useEffect(() =&gt; {
      setTimeout(() =&gt; {
        cycleAnimation();
      }, 1000);
    }, []);
    return (
      &lt;motion.div
        className=&quot;text-2xl text-gray-600&quot;
        variants={PlaneVariants}
        animate={animation}
      &gt;
        &lt;FaPaperPlane /&gt;
      &lt;/motion.div&gt;
    );
  }
  </code></pre>
  <p><code>cycleAnimation()</code> was supposed to cycle through 3 animations but only cycling through the first two. The 3rd is only applied when making some change to the code and updating it.</p>
  <p>The final goal is to have a movement that goes from right corner of the page to middle, does a knot movement and then travels to the top of the page.</p>
  <p>Any ideas how to make it cycle through as many animation variants as I want?</p>