score:4

Accepted answer

its a bit tricky, but you need to animate only when the items are available:

animate={recipes.length > 0 && "visible"}

that's because on the first render you actually animate an empty array.

animate="visible"

then, when you update the recipes after the async call, you don't trigger the animation again.

const container = {
  hidden: { opacity: 1, scale: 0 },
  visible: {
    opacity: 1,
    scale: 1,
    transition: {
      staggerchildren: 0.5
    }
  }
};

const item = {
  hidden: { x: 100, opacity: 0 },
  visible: {
    x: 0,
    opacity: 1
  }
};

const request = `https://www.themealdb.com/api/json/v1/1/search.php?s=chicken`;

function app() {
  const [recipes, setrecipes] = usestate([]);

  useeffect(() => {
    const getrecipes = async () => {
      const response = await fetch(request);
      const data = await response.json();
      setrecipes(data.meals);
      console.log(data.meals);
    };
    getrecipes();
  }, []);

  return (
    <div classname="app">
      <motion.ul
        variants={container}
        initial="hidden"
        animate={recipes.length > 0 && "visible"}
      >
        {recipes.map(recipe => (
          <motion.li key={recipe.idmeal} variants={item}>
            <recipecard title={recipe.strmeal} />
          </motion.li>
        ))}
      </motion.ul>
    </div>
  );
}

edit eager-mestorf-i8y14


Related Query

More Query from same tag