使用Framer Motion制作背景动画

Question

我正在尝试创建一个React组件，当向下滚动到它时，它的背景从颜色转换为图像。

这就是组件：

const TeamSection = () => {
return (
<Background>
<TeamSectionContainer
initial={{
opacity: 0,
}}
whileInView={{
opacity: 1,
}}
transition={{
ease: "easeOut",
duration: 2,
}}
>
<Title>Text</Title>
<Team>Text<Team>
</TeamSectionContainer>
</Background>
);
};

样式：

const TeamSectionContainer = styled(motion.div)`
${tw`
bg-no-repeat
w-full
min-h-[200vh]
flex
flex-col
`};
background-image: url(${BackgroundImage});
`;
const Background = tw.div`
bg-[#001F33]
`;

结果是，th动画适用于整个TeamSectionContainer组件，包括其背景。我正在努力使其没有任何内容是动画，只有背景是。

这是如何实现的？

Answer 1

我认为你不能像那样设置背景图像的不透明度动画。您需要在带有背景图像的TeamSectionContainer中添加一个单独的div，并将动画应用于此：

const TeamSection = () => {
return (
<Background>
<TeamSectionContainer>
<motion.div className="backgroundImage"
initial={{
opacity: 0,
}}
whileInView={{
opacity: 1,
}}
transition={{
ease: "easeOut",
duration: 2,
}}
/>
<Title>Text</Title>
<Team>Text<Team>
</TeamSectionContainer>
</Background>
);
};