Описание тега framer-motion
3
ответа
Оживите детей при наведении на родителя с помощью Framer-motion
Используя движение фреймера, я хочу анимировать вращение моего компонента Icon на 90 градусов при наведении на родительский элемент, который является кнопкой. <motion.button type="button" whileHover={{scale: 1.1}}> Visit our Industry {/*Animat…
20 июл '19 в 16:38
0
ответов
Заменить тег <svg> на тег <motion.svg> в конфигурации svgr create-реагировать-приложение для поддержки Framer Motion API?
Используя create-response-app, вы можете использовать встроенный SVGr для импорта SVG напрямую как компонент React, например: ( также описано здесь) import { ReactComponent as Close } from 'icons/close.svg'; Я использую новый API-интерфейс Framer Mo…
16 авг '19 в 01:00
1
ответ
Проблема с анимацией компонентов реакции с использованием движения фреймера при изменении состояния
У меня проблемы с анимацией, использующей движение фреймера. Любая помощь будет очень приветствоваться. Пример песочницы кода
29 авг '20 в 04:08
0
ответов
Колесо фортуны реагирует на движение фреймера
Я пытаюсь создать колесо фортуны с помощью реакции и движений для анимации.вот моя проблема: при щелчке по кругу я хочу запустить анимацию, как сейчас, и держать ее вращающейся, а затем получить данные о позиции от 1 до 8 (просто число) и остановить…
22 авг '20 в 13:20
1
ответ
Как изображение SVG, преобразованное в компонент React, можно использовать в качестве фонового изображения?
На своем веб-сайте Gatsby я намерен использовать несколько анимированных фонов, поэтому я получил изображения SVG, преобразовал их в компонент React и анимировал определенные группы SVG с помощью Framer Motion. Результаты великолепны: у меня есть ан…
17 фев '20 в 17:53
1
ответ
Как исправить "ошибку парсинга" при добавлении элемента <motion.div /> в движение React / Framer
Я запустил новое приложение для реагирования [create-react-app] и установил framer-motion. Приложение работает должным образом, пока не будет добавлен элемент движения кадра: export const HomePageTemplate = ({ home }) => { return ( <Fragment&g…
24 окт '19 в 06:15
1
ответ
Привязка к положению onDragEnd с помощью motionValues с помощью Framer Motion и React
Я использую движение кадра, чтобы создать взаимодействие смахивания в моем проекте. Я пытаюсь сделать так, чтобы, когда пользователь закончил перетаскивать ребенка, он "защелкивался" обратно в заданное положение. Я видел из документации, что вы може…
23 сен '19 в 23:53
1
ответ
Как заставить React Framer-motion запускать события onClick для мобильных устройств при использовании опоры перетаскивания?
В настоящее время я использую библиотеку React Framer Motion, чтобы анимировать некоторые жесты, которые мне нужны в моем приложении. Похоже, у меня проблема со свойством "drag" для тега "motion.div". например <motion.div drag> <button onCl…
26 сен '19 в 01:38
0
ответов
Framer motion scroll box плавная детская анимация
Я хочу воспроизвести эту классную анимацию для поля прокрутки / перетаскивания вверху https://dribbble.com/shots/6396764-Smart-Home-Controller но все равно не прав, есть ли у вас идеи или примеры кода, чтобы сделать его равным или задушить? https://…
14 ноя '19 в 07:45
2
ответа
Gatsby build / SSR заменяет компоненты, вызывающие ошибки отображения
Обновление: указанная ниже проблема была решена, но у меня возникла аналогичная проблема: В моем шаблоне галереи ( см. Пример страницы здесь, все загружается нормально, если перейти на сайт через сайт. При обновлении родительский div сетки (GalleryG…
07 фев '20 в 00:59
1
ответ
Animate не работает с whileHover в React
В настоящее время я сталкиваюсь с этой проблемой, когда мои анимации отказываются работать, несмотря на то, что моя шкала срабатывает при наведении курсора. Я просмотрел документацию и до сих пор не могу понять. Что я упустил? Помогите! Вот мой код …
08 фев '20 в 23:04
1
ответ
Анимация добавления блока в список блоков в React
У меня есть горизонтальный ряд ящиков, выровненных по правому краю. Я хочу добавить новый блок с правой стороны, чтобы он постепенно сдвигался внутрь, перемещая другие блоки влево при этом. https://codesandbox.io/s/vibrant-curran-xqcbh?file=/src/App…
12 апр '20 в 01:18
2
ответа
Анимация движения Framer, когда элемент виден (когда вы прокручиваете до элемента)
Есть ли какой-либо встроенный способ запустить анимацию, когда элемент находится в поле зрения (например, когда мы прокручиваем до элемента)? Framer Motion имеет раздел анимации монтирования, в котором говорится: Когда компонент монтируется, он авто…
20 ноя '19 в 19:22
2
ответа
Переход, когда не работает во Framer Motion
Я использую Framer Motion в качестве библиотеки анимации в проекте React. Я пытаюсь оживить родительский элемент после дочернего элемента, используя атрибут when. Не работает, потому чтоContentVariants а также ImgVariants работают одновременно. коды…
21 ноя '19 в 20:11
1
ответ
Как правильно настроить перетаскивание ручки перетаскивания в Framer Motion?
Я хотел воспроизвести это руководство (https://www.youtube.com/watch?v=UMGnYRJuJog), в котором показано, как создать маркер перетаскивания во Framer X. Использованиеframer-motion, Я думал, что это сработало, но у меня появляется дополнительное прост…
18 дек '19 в 22:40
0
ответов
Как я могу перемещать динамически созданные элементы, каждый по отдельности, с помощью Framer Motion?
Я подготовил этот пример: https://codesandbox.io/s/move-out-right-5m7if Я хочу, чтобы при нажатии кнопки в <tr> что только это конкретное <tr>движется вправо. Проблема пока в том, что каждая кнопка запускает все<tr>'s, и это просто…
26 янв '20 в 14:47
1
ответ
Как я могу исправить мою анимацию Framer Motion в React?
Я пытался воссоздать аналогичный интерфейс, который есть у TypeForm для создания вопросов. Если вы заметили в их редакторе, правая сторона прокручивается как страница вверх и вниз, когда вы используете стрелки. В моем приложении я хочу, чтобы оно пр…
03 фев '20 в 19:35
3
ответа
Как анимировать чистые данные, такие как числа от 0 до 100, в кадре-движении?
<motion.div> {num} </motion.div> Во фреймере анимировать стили довольно просто, но как я могу анимировать чистое число, я хочу, чтобы 0 было анимировано до 100 с конфигурацией перехода, как я могу это сделать?
13 фев '20 в 13:23
3
ответа
Framer-motion, задержка rotateY при анимации x
Я работаю с Framer-motion, и я пытаюсь найти способ отложить анимацию rotateY, пока x анимируется в определенное положение, а затем запускает rotateY. Возможно ли это во Framer motion? Пример: const variants = { flip: { rotateY: 0, x: -20, scale: 1,…
24 мар '20 в 08:04
0
ответов
IntersectionObserver ошибочно срабатывает при загрузке страницы (Gatsby)
Я пытаюсь использовать API IntersectionObserver для запуска анимации, когда элемент попадает в область просмотра на моем сайте Gatsby. Собственно, все работает как положено. Есть только одна вещь, которую я не могу осмыслить. После того, как компоне…
27 мар '20 в 16:42