GSAP 简码

为 GreenSock 动画平台提供的快速和简单的代码补全

详细信息

版本 1.0.0
主页 github.com
问题 github.com
修改于 9年前
上次看到 49分钟前
首次看到 9年前

安装

总计 3K
Win 1K
Mac 1K
Linux 167

	8月6日	8月5日	8月4日	8月3日	8月2日	8月1日	7月31日	7月30日	7月29日	7月28日	7月27日	7月26日	7月25日	7月24日	7月23日	7月22日	7月21日	7月20日	7月19日	7月18日	7月17日	7月16日	7月15日	7月14日	7月13日	7月12日	7月11日	7月10日	7月9日	7月8日	7月7日	7月6日	7月5日	7月4日	7月3日	7月2日	7月1日	6月30日	6月29日	6月28日	6月27日	6月26日	6月25日	6月24日	6月23日	6月22日
Windows	0	0	0	0	0	0	0	2	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	1	0	0	0	0	0	0	0	0	0	1	0	0	0	0	0	0	0	1
Mac	2	1	0	0	0	0	0	0	1	0	0	0	1	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0
Linux	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0

README 文件

源代码: raw.githubusercontent.com

GSAP 简码

为 GreenSock 动画平台提供的快速和简单的代码补全

输入片段快捷代码，然后按 Tab 键完成片段。

以下以字母顺序列出片段。'{$1}' 表示光标的初始位置。有些片段有多个 Tab 定位点，如 '${2} ${3} ${4}'，其中数字表示在片段中按 Tab 的顺序。

您可以随意试用、修改、扩展或对这些片段进行任何操作。如果您想到了非常有用的片段或错误，或者只是我漏掉的东西，请告诉我（通过 Twitter 或在 GitHub 上），这样我可以为每个人改进这些内容。谢谢！

注意：我大多数时间使用 TimelineMax 并且将我的缓动直接链接到时间轴。
示例

var exampleTL = new TimelineMax()
    .staggerFrom(["h1, h2, button"], 0.5, {y:100, autoAlpha: 0, ease: Power3.easeOut }, 0.25)
    .staggerFrom(".myClass", 0.5, {x: -200, autoAlpha: 0, ease: Power3.easeOut }, 0.2, "-=0.5")
    .to("#myID", 1, {y: 85, ease: Power3.easeInOut})
    .to(".element", 0.5, {opacity: 0.3 }, "-=0.5");

这就是为什么我在大多数缓动之前包含了 .，但没有在它们的末尾包含 ;。请随意调整这些并根据您的 GSAP 代码风格使它们起作用。

可拖动
Draggable.create(${1:element}, {type: "${2:drag_type}", ${3:vars}});

来自
.from(${1:element}, ${2:1}, {${3:vars}, ease: ${4:Power3.easeInOut}})

从...到
.fromTo(${1:element}, ${2:1}, {${4:fromVars}}, {${5:toVars}})

设置
.set(${1:element}, {${2:vars}})

SplitText
SplitText(${1:element}, {type:"${2:words,chars,lines}"});

stagger
.stagger${1:To}(${2:element}, ${3:0.5}, {${4:vars}, ease: ${5:Power3.easeInOut}}, ${6:0.25})

staggerFromTo
.staggerFromTo(${1:element}, ${2:0.5}, {${4:fromVars}}, {${5:toVars}}, ${6:0.25})

时间线
new Timeline${1:Max}(${2:{options\}})

到
.to(${1:element}, ${2:1}, {${3:vars}, ease: ${4:Power3.easeInOut}})

Tween
Tween${1:Lite}.${2:to}(${3:element}, ${4:1}, {${5:vars}, ease: ${6:Power3.easeInOut}});