Hello~
👋🏻
我是 @好奇代码的三木
一个UI&UX Designer / Developer
CSS
HTML
JavaScript
React
Threejs
Nextjs
Nodejs
WebGL
TypeScript
mini-Programme
Shell
我的课程
JavaScript
高手之路全能课在B站课堂!让你真正彻底掌握JS
点击了解
我目前主要使用的框架是🥰React,如果要在React环境中去实现很多交互动画或者元素动画,其实并不好处理。所以一般都会搭配一些第三方库以提高开发效率。
而Framer-motion这个库,是我体验过的最好用的React生态下的交互动效库。
尝试鼠标悬浮在元素上
页面滚动与元素联动
尝试拖拽中间的元素
实现SVG的动态效果
在学习使用Framer-motion的过程中,我自己是参考他们的官方文档进行学习的。但是作为文档,它并不是按照教程的思路来设计内容,所以其实看文档来学习,一开始还是让我感觉很头疼。
而且很多同学英文也不好,包括我,其实也只是勉强能看得懂英文的文档,所以整体的学习效果并不好。
为了让更多人能够学会使用Framer-motion,因此我就自己按照自己的思路,设计并整理了这样一个Framer-motion教程。
希望这个教程能够帮到你更好地学会如何使用Framer-motion,用它做出更多有趣高级的效果。
#
Framer-Motion
Framer-motion是Framer公司出的一个基于React的用来高效实现各种交互和动画效果的开源库。
Framer是一个网页版跨平台的高保真原型工具/无代码/低代码建站工具。我这个教程网站,就是通过Framer来制作完成并通过Framer一键发布的。
#
支持与联系
可以扫码请我喝杯咖啡
如果我的内容对你有用
👈👈👈
或者加群一起学习👉
如果需要直接联系我