Framer 使用滚动变体创建动画

介绍:

Scroll Variant

Scroll Variants allows you to change the active variant of a component on sections on your page entering the viewport.

“滚动变体”（Scroll Variants） 允许您在页面上进入视口的部分上更改组件的活动变体。

You can use Scroll Variants to make a navigation bar change its appearance as the user scrolls down the page, such as changing its background color or adjusting the positioning of elements. Or a sidebar highlighting the active sections as you scroll down the page.

您可以使用“滚动变体”使导航栏在用户向下滚动页面时更改其外观，例如更改其背景颜色或调整元素的位置。或者在向下滚动页面时突出显示活动部分的侧边栏。

Demo1: 实现一个滚动到不同部分,修改导航栏的背景颜色的效果

创建导航栏组件

第一步就是创建一个导航栏组件 可以直接按下命令 K 并调出快捷菜单。

然后输入组件名字,就可以进入到组件编辑页面了

然后我们创建一个最基本的导航栏(默认)

• 左边放入LOGO
• 右边放入包裹每一菜单项的大盒子

也就是导航栏 采用flex布局, 子项y方向垂直居中, x方向左右两端分布, 左右两边加入内边距padding 每一项的item 也是flex伸缩盒布局, 子项垂直水平居中

紧接着我们复制这个组件两份,分别修改背景颜色为黑色 和黄色 最终效果:

然后我们组件就完成了, 当然有很多地方需要优化,但这不是重点. 我们回到首页.

页面完善,用于展示

创建三个页面,分别填充黑色,白色,黄色. 并且将我们刚刚创建的组件导入进来, 然后设置固定(fixed)定位,宽度为100%.

组件创建之后会存在于Assets 里面,我们直接从里面拖入页面即可导入.

给组件加入滚动变体动画

下面就来给组件加入滚动变体动画.

1. 单击组件, 点击左侧属性栏的Effect ==> 点击+号 添加scroll variant

1. 编辑

给每个页面加入了Scroll Section Name(这也在左侧属性面板,往下面划划就看到了).这方便我们用来控制当nav组件到某个部分,转换哪个变体.

然后看下面. 解释:

触发的方式我们选择Section In View, 这表示当某个部分到达视图时触发.

触发的时机呢,就是ViewPort, 视口的顶部,中部,底部到达浏览器窗口的顶部

触发次数: 重复重复,即滚动下去触发一次, 滚动上去也依然会触发一次.

To状态,组件的变化.

明白了上面这些,那下面这张图就好理解了.

当黑色部分在浏览器视口中,导航栏使用默认的组件 当白色部分在浏览器视口中,导航栏使用黑色背景的导航栏组件 当黄色部分在浏览器视口中,导航栏使用黄色背景的导航栏组件

效果:

我们可以看到 当滚动不到不同部分的时候,导航栏就会使用不同的组件.

Demo2: 实现一个滚动到不同部分,更改左侧的icon图标

效果:

在上个效果的基础上,我添加了

• 渐变背景
• 填充了文本,并使用绝对定位固定到页面上.
• 给每个页面添加了 粘性布局, 达到视差的效果.

然后就说下创建变体Icon 图标. 观察上方的Gif图片,我们就会发现,滚动到不同部分.右边的ICON 图标 在进行相应的变化.

具体步骤:

第一步: 我们创建一个组件, 引入3个图标(Framer内置了,可以在import里面找到).

第二步: 引入到页面上,使用固定定位,定位在指定位置.

第三步: 添加滚动变体效果,滚动到不同部分,选择不同的组件即可.

这里我就不把属性图进行贴出了, 和上面第一个创建方法一致. 大家可以自己试一下.

结语

可以自己想一下有哪些好玩的创意可以应用到网站上面的.

下面就该DEMO 的 原模版文件地址:

framer.com/projects/HS…

在线体验地址:

azure-screen-064672.framer.app/