【笔记】GSAP学习笔记

发表于 阅读次数：

前言

GSAP – A wildly robust JavaScript animation library built for professionals（官网）

引入依赖

1
<script src="https://unpkg.com/gsap@3/dist/gsap.min.js"></script>

获取GSAP对象

通过id选择器获取DOM

1
2
3
4
5
6
7
<svg>
  <rect id="react" x="10" y="10" width="10" height="10"></rect>
</svg>

<script>
  gsap.to("#react", {});
</script>

通过DOM对象获取DOM

1
2
3
4
5
6
7
<svg>
  <rect id="react" x="10" y="10" width="10" height="10"></rect>
</svg>

<script>
  gsap.to(document.querySelector("#react"), {});
</script>

定义动画

x：被修改的属性
20：修改后的属性值
duration：动画持续时间，单位秒

1
2
3
4
gsap.to("#react", {
  x: 20,
  duration: 1,
});

完成