今天老鱼带领大家学习如何使用最少的代码创建令人叹为观止的滚动动画~看完你一定会忍不住上手实战，不要错过哦

GSAP + ScrollTrigger：将动画进度与滚动位置精确绑定，支持scrub擦除、pin固定、视差等复杂效果，灵活强大，适合创意滚动交互。

GSPA是制作网页动画的工具（很全），你可以使用GSAP对几乎所有JavaScript能接触到的东西进行动画处理，可以在任何框架中使用。ScrollTrigger是其中一个插件，用于滚动触发动画。

GSAP 动画从性能到核心概念 性能差的属性（点名 filter） 性能好的属性（点名 transform） 动画的偏移量 动画的时间 GSAP ScrollTrigger 插件 性能差的属性 先来说

最近在看一些文章和官网的时候，都能看到一些酷炫的动画效果。就发现了GSAP这个好东西，可以说GSAP提升动画Level，减低动画难度。接下来看一下实现的GSAP常见动画。

前言 作为一个前端开发，不可避免地需要开发动画。如果自己临时写一个动画，还是比较容易出问题的，今天介绍一个很好用的动画库，功能十分强悍 ———— GSAP。 效果 说再多，也不如直接来效果来的直观。

在上一篇文章中，我们对GSAP的用法有了一个简单的了解，本文我们就结合GSAP的用法教程，仿照荣耀官网MagicOS的页面，实现一个酷炫的网页效果。 本文正在参加「金石计划」。

Greensock 动画库的 ScrollTrigger 和 Draggable 插件可以帮助我们创建一些非常酷的响应用户交互的效果。

start: 何时开始/结束动画 markers: 标记触发点 trigger/endTrigger: 根据元素来触发/结束动画 scrub: 让动画播放赶上滚动条，即根据进度条来控制动画进度