基于带有成帧器运动的滚动来控制元素的行为
Controlling an element's behaviour based on scroll with framer motion
我想知道是否可以 link 页面上的元素的值应该根据您滚动的距离，使用 framer 运动设置动画。
例如，假设我在一堆文字旁边有一张树图片，我该怎么做才能让当我向下滚动那个特定部分时，树的不透明度或高度增加，如果我向上滚动页面相反的情况发生了。
因此，如果您滚动了该部分的 50%，树的不透明度将为 0.5。让我尝试以最好的方式在代码中表示这一点。
<div className='flex justify-between'> // tailwind styling
<img src='/treeImage.png' />
<p>Some bunch of text...</p>
</div>
是的，有可能。
您将使用 useElementScroll or useViewPortScroll to get the scroll position as a Motion Value. You can then use that value to animate the properties of the motion.img of the tree. Most likely you'd use useTransform 将滚动值映射到您要更改的图像的属性。
我想知道是否可以 link 页面上的元素的值应该根据您滚动的距离，使用 framer 运动设置动画。
例如，假设我在一堆文字旁边有一张树图片，我该怎么做才能让当我向下滚动那个特定部分时，树的不透明度或高度增加，如果我向上滚动页面相反的情况发生了。
因此，如果您滚动了该部分的 50%，树的不透明度将为 0.5。让我尝试以最好的方式在代码中表示这一点。
<div className='flex justify-between'> // tailwind styling
<img src='/treeImage.png' />
<p>Some bunch of text...</p>
</div>
是的，有可能。
您将使用 useElementScroll or useViewPortScroll to get the scroll position as a Motion Value. You can then use that value to animate the properties of the motion.img of the tree. Most likely you'd use useTransform 将滚动值映射到您要更改的图像的属性。