Hello~

👋🏻

我是 @好奇代码的三木

一个UI&UX Designer / Developer

CSS

HTML

JavaScript

React

Threejs

Nextjs

Nodejs

WebGL

TypeScript

mini-Programme

Shell

GSAP👍🏼是前端业内非常有名的一个动效库,有大量的优秀的网站都在使用它。它不仅能在原生JS的环境下使用,也能配合各种当前流行的框架进行使用。

通过使用它,非常多原本实现起来很有难度的交互动画效果,都能快速高效的实现。

专业级-为现代网站打造的JS动画框架

快如闪电

无比强大

无所不兼

以下介绍是官方介绍的翻译:

性能表现是首要考虑的,尤其是在一些处理器性能不够好的移动设备上。要提供足够丝滑和流畅的动效体验才能对得起使用库所带来的额外代码开销。GSAP具有超强的性能表现,能让原本的卡顿的动效体验变得丝滑无比,这是因为我们经过了无数次的优化来保证每一个项目都能通过我们获得非常好的性能体验。

GSAP是专业级的,它的各种功能让其他的动效库看起来就像廉价的玩具一样。它能让颜色、bezier、css属性、数组等等各种各样的东西进行运动变化。可以实现令人瞠目结舌的滚动联动效果,以及各种各样的功能(原文是各种专业名词,我这里就不翻译了,反正意思就是功能特别强大,特别吊炸天)。

不管是HTML、SVG、React、Vue、Angular、jQuery、Canvas、CSS、现代浏览器、老旧浏览器、移动端浏览器,GSAP都能很好的配合进行工作。你只要继续使用你自己常用的工具,然后搭配上它就好了,完全不用担心兼容性的问题。所有的兼容性问题,都是我们该考虑的,你不需要操心。

作为一个🤪设计师出身的开发者,我自己对于各种网站、APP或者程序的交互体验有着更高的要求和期待,因此总是比一般的开发者更喜欢研究各种能帮我实现各种丰富、细腻、自由的动效的库与框架。

GSAP我是久仰大名,因为我总会在各种充满设计感、高级的交互动效的网站上看到它的身影。

虽然GSAP上手非常容易,但是真的要把它用的非常好,也不是一件简单的事。我一直想抽时间学习GSAP,但是它的中文学习资料非常少,英文的学习资料也主要的集中于在官方的文章、文档以及一些视频。

于是,我就想从官方的一些文章和文档开始吧,为了能够更深入更仔细阅读这些内容,我就试着通过📝翻译它们来和大家一起学习这个非常厉害的框架!🥳

#

支持与联系

可以扫码请我喝杯咖啡

如果我的内容对你有用

👈👈👈

或者加群一起学习👉

如果需要直接联系我

我的课程

JavaScript

高手之路全能课在B站课堂!让你真正彻底掌握JS

点击了解

#

版本问题

GSAP目前大版本是3.0,这个和以前2.0的版本最大的不同是所有核心功能都集合到GSAP当中去使用,而不是像以前一样分为四个部分TweenLiteTweenMaxTimelineLiteTimelineMax,这个是大家需要注意的。