问题标签 [framer-motion]

我目前面临这个问题，尽管我的比例在悬停时触发，但我的动画拒绝工作。

我浏览了文档，但仍然无法弄清楚。我错过了什么？帮助！

这是我的代码和来自浏览器的警告：

我的索引页面上有以下链接，该链接链接到我的About Us页面：

在我的_app.js文件中，我有这个AnimatePresence包装器：

现在，当我点击我的About Us链接时，浏览器 URL 栏显示新路由，但页面内容仍然是索引内容。

但是，当我移除AnimatePresence包装器时，它工作正常（当然没有动画）。

为什么我的动画不起作用？

如何使用过渡配置为 0 到 100 的纯数字设置动画？

在我的 Gatsby 网站中，我打算使用一些动画背景，所以我得到了 SVG 图像，将它们转换为 React 组件，并使用 Framer Motion 为某些 SVG 组设置动画。结果非常棒：我的动画在作为独立组件添加到页面时可以完美显示，但是如何将它们用作 div 或部分的背景？

这是其中一个组件：

先感谢您！

阅读 Framer Motion 的文档后，我找不到，或者我错过了当元素进入视点时触发动画的可能方法。我一直在做推荐的方法，但只有一个元素。当我添加更多元素时，动画只会在最后一个元素进入视点后触发，不应该那样。计划是单独加载每个元素。

所以，我一直在研究使用 React Intersection Observer 的可能方法。不幸的是，我无法设置可以完成这项工作的有效脚本。

所以我的目标是：使用 forEach 方法单独加载每个元素。

您可以检查链接中发生的情况。只有在最后一个动画加载后，您才能看到标题加载下的动画。

https://xen.grga.now.sh/

我正在使用 Framer-motion，我正在尝试找到一种方法来延迟 rotateY 的动画，而 x 动画到特定位置然后启动 rotateY。

这在 Framer 运动中可能吗？

例子：

当元素进入我的 Gatsby 网站的视口时，我正在尝试使用 IntersectionObserver API 来触发动画。实际上，它按预期工作。只有一件事我无法理解。组件安装后，观察者被触发并触发“真”，就好像元素已进入视口一样。这是我的 useOnScreen 钩子和 React 组件的代码：

如果我加载页面/组件，我会得到以下控制台日志：

有谁知道为什么在安装组件后会触发观察者？

我目前正在通过运行observer.observe(ref.current)setTimeout 为 1000 毫秒的线路来解决此问题。这解决了它，但我不确定这是否是正确的做法？

我有一堆使用 动画的元素AnimatePresence，但我不希望它们在我的组件的初始加载期间动画，仅在与组件的后续交互期间。有没有一种简单的方法来AnimatePresence最初禁用动画然后重新启用它们？

我有一排水平的盒子，右对齐。我想在右侧添加一个新盒子，让它逐渐滑入，同时将其他盒子向左移动。

https://codesandbox.io/s/vibrant-curran-xqcbh?file=/src/App.js是我得到的。这是我的代码：

有两个问题：

1. 所有现有的盒子向左移动的速度比下一个盒子快得多。
2. 现有的盒子在移动后会产生类似弹簧的振动。相反，我希望他们平稳地移动到他们的目的地，而不是超越它并振荡。

关于从这里去哪里的任何想法？

我使用了 framer-motion，但我并不喜欢它，如果另一个库使这更容易的话。

我是 nextjs 的新手，使用nextjs v9.3, next-redux-wrapper v5,@material-ui/core v4.2和custom express server.

我正在尝试在我的 Nextjs 应用程序中更改路由时实现加载屏幕，因此我使用成帧器运动在页面之间进行转换并且工作正常，但现在如何在更改路由时使用加载组件？

我目前的实现如下：

_app.js

更新

方法 1：在 next.js v9.3 中，当我使用 framer-motion

方法 2：在 next.js v10 及更高版本中，我使用了 "nprogress": "^0.2.0"