CODEWITHSUNDEEP
javascriptreactjsanimationcss-animationsframer-motion
RandomDeveloper
RandomDeveloper

Reputation: 883

How to move plane icon with framer motion?

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.

This is how my react component called NavPlane looks like:

import React, { Component, useEffect } from "react";
import { useCycle } from "framer-motion";
import { FaPaperPlane } from "react-icons/fa";
import { motion } from "framer-motion";

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(
    "animationOne",
    "animationTwo",
    "animationThree"
  );
  useEffect(() => {
    setTimeout(() => {
      cycleAnimation();
    }, 1000);
  }, []);
  return (
    <motion.div
      className="text-2xl text-gray-600"
      variants={PlaneVariants}
      animate={animation}
    >
      <FaPaperPlane />
    </motion.div>
  );
}

cycleAnimation() 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.

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.

Any ideas how to make it cycle through as many animation variants as I want?

Upvotes: 1

Views: 1525

Answers (1)

Sohaib
Sohaib

Reputation: 11307

cycleAnimation only advances one step. Initially it will start "animationOne". Once you call cycleAnimation() after 1 second, "animationTwo" will start. You need another timer if you want to play "animationThree"

useEffect(() => {
  setTimeout(cycleAnimation, 1000); // start "animationTwo" after 1 second
  setTimeout(cycleAnimation, 2000); // start "animationThree" after 2 seconds
}, []);

Upvotes: 2

Related Questions