在使用X位置时inview不工作时React Framer Motion

Question

我试图使用whileInView来动画一些元素的滚动在反应。

这里是codesandbox链接:https://bz6msx.csb.app/

如果你去检查代码，你会看到当使用whileInView时，它不会触发动画。

我错过了什么吗?

感谢

Answer 1

我想你已经收到这个问题的答案了，在这里。

这不是bug。whileInView属性与交集相关联观察者API。在你的CodeSandBox中，h1标签具有x的初始状态:100 vh。H1标签在视窗中不可见。只有可见元素激活whileInView动画。

有一些技巧

设置100vw为95vw。

<div className="App">
<motion.h1
initial={{
x: "95vw" // set 100vw to 95vw
}}
// This is not working
whileInView={{
x: 0,
transition: {
duration: 1,
type: "spring",
stiffness: 50
}
}}
>
Motion
</motion.h1>
</div>

Set WhileInView Property parent tag.

import "./styles.css";
import { motion } from "framer-motion";
import { useState } from "react";
export default function App() {
const [isInView, setIsInView] = useState(false);
return (
<motion.div
whileInView={() => {
// when element in viewport , set IsInView true!
setIsInView(true);
return {};
}}
className="App"
>
<motion.h1
initial={{
x: "100vw"
}}
// This is working
animate={
isInView && {
x: 0,
transition: {
duration: 1,
type: "spring",
stiffness: 50
}
}}
>
Motion
</motion.h1>
</motion.div>
);
}