GSAP动画库使用示例

今天介绍的GSAP是一个专业的网页动画工具库。当我访问GSAP官方网站时，我看到了一组非常酷的动画效果。乍一看还以为是AE做的视频，整个动画流畅到让人很难想到是JavaScript做的。

安装 GSAP

npm install gsap

或通过 CDN 引入

<script src="https://cdn.jsdelivr.net/npm/gsap@3.11/dist/gsap.min.js"></script>

快速开始

// 引入模块
import gsap from "gsap";

// 通过 css 选择器来确定执行动画的元素
gsap.to('.box', {
  x: 400, // 移动位置
  y: 50,
  rotation: 180, // 旋转角度
  duration: 3, // 持续时间
  repeat: 2 // 重复次数
});

基于JavaScrip的web动画库——GSAP

GSAP文档官网介绍

标签： GSAP, 动画库

上面是“GSAP动画库使用示例”的全面内容，想了解更多关于 前端知识 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_12722.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！