Как анимировать уменьшение высоты через Framer Motion?

Для анимации уменьшения высоты элемента в React с использованием библиотеки Framer Motion, необходимо использовать компонент Motion для обертки анимируемого элемента и применить анимацию с заданными параметрами.

Прежде всего, установите необходимую зависимость, выполнив команду:

npm install framer-motion

После установки зависимости, импортируйте компонент Motion из библиотеки Framer Motion в вашем компоненте React:

import { motion } from "framer-motion";

Затем, создайте компонент и используйте компонент Motion для анимации уменьшения высоты элемента:

import React from "react";
import { motion } from "framer-motion";

const App = () => {
  return (
    <div className="container">
      <motion.div
        className="box"
        initial={{ height: "100px" }} // начальное состояние
        animate={{ height: "50px" }} // анимационное состояние
        transition={{ duration: 0.5 }} // параметры анимации
      >
        Анимируемый элемент
      </motion.div>
    </div>
  );
};

export default App;

В данном примере, мы создали компонент App, который содержит анимируемый элемент с классом "box". В компоненте Motion мы определили начальное состояние элемента (высота 100px), анимационное состояние (высота 50px) и параметры анимации.

Параметры анимации transition определяют длительность анимации (duration) в секундах. Вы можете настроить длительность или другие параметры анимации, такие как задержка (delay), функция времени (easing), и т.д., в зависимости от ваших потребностей.

Код выше просто показывает, как анимировать уменьшение высоты элемента с использованием Framer Motion. Вы можете дальше настроить анимацию, добавить другие стили или дополнительные действия при анимации по вашему усмотрению.

Обратите внимание, что Framer Motion также предоставляет множество других возможностей для анимации, таких как анимация появления (opacity), сдвиг (translate), поворот (rotate) и многое другое. Вы можете исследовать документацию Framer Motion для получения более подробной информации о всех возможностях библиотеки и использовать их в своем проекте.