Let's get animating! 让我们开始制作动画吧！ #

Welcome! In this article we're going to cover GSAP's core fundamentals and animate some HTML elements. 🥳 欢迎！在本文中，我们将介绍 GSAP 的核心基础知识，并为一些 HTML 元素制作动画。🥳

If that's not your end goal, don't worry. Whatever you plan to animate, whichever framework you use - the techniques and principles covered here will serve you well. 如果这不是您的最终目标，请不要担心。无论你打算制作什么动画，无论你使用哪种框架，这里介绍的技术和原则都会为你带来很好的帮助。

What is "GSAP"? 什么是“GSAP”？ #

The GreenSock Animation Platform (GSAP) is an industry-celebrated suite of tools used on over 11 million sites, including a ton of award‑winning ones! You can use GSAP to animate pretty much anything JavaScript can touch, in any framework Whether you want to animate UI, SVG, Three.js or React components - GSAP has you covered. GreenSock 动画平台 （GSAP） 是一套业界知名的工具，用于超过 1100 万个网站，其中包括大量屡获殊荣的网站！你可以使用 GSAP 在任何框架中对 JavaScript 可以触及的几乎任何内容进行动画处理。无论您是想对 UI、SVG、Three.js 还是 React 组件进行动画处理，GSAP 都能满足您的需求。

The core library contains everything you need to create blazing fast, cross-browser friendly animations. This is what we'll be stepping through in this article. 核心库包含创建超快、跨浏览器友好动画所需的一切。这就是我们将在本文中逐步介绍的内容。

In addition to the core, there are a variety of plugins. *You don't need to learn them in order to get started*, but they can help with specific animation challenges like scroll based animation, draggable interactions, morphing, etc. 除了核心之外，还有各种插件。您无需学习它们即可开始，但它们可以帮助解决特定的动画挑战，例如基于滚动的动画、可拖动的交互、变形等。

Creating an animation. 创建动画。 #

Let's start by animating an HTML element with a class of "box". 让我们首先使用类 “box” 对 HTML 元素进行动画处理。

gsap.to(".box", { x: 200 })

gsap.to(".box", { x: 200 })

A single animation like this is called a 'tween' This tween is saying "hey GSAP, animate the element with a class of '.box' to an x of 200px (like transform: translateX(200px))". 像这样的单个动画称为“补间”，这个补间在说“嘿，GSAP，用类的'.box'将元素动画化为200px（就像 transform: translateX(200px) ）的x”。

Let's take a closer look at the syntax. 让我们仔细看看语法。

We've got a method, a target and a vars object which all contain information about the animation 我们有一个方法、一个目标和一个 vars 对象，它们都包含有关动画的信息

The method(s) 方法 #

There are four types of tweens: 补间有四种类型：

gsap.to() - This is the most common type of tween. A .to() tween will start at the element's current state and animate "to" the values defined in the tween.gsap.to() - 这是最常见的补间类型。 .to() 补间将从元素的当前状态开始，并对补间中定义的值进行动画处理。

gsap.from() - Like a backwards .to() where it animates "from" the values defined in the tween and ends at the element's current state. gsap.from() - 就像向后一样 .to() ，它对补间中定义的值进行“自”动画处理，并在元素的当前状态结束。

gsap.fromTo() - You define *both* the starting *and* ending values.gsap.fromTo() - 定义起始值和结束值。

gsap.set() Immediately sets properties (no animation). It's essentially a zero-duration .to() tween. gsap.set() 立即设置属性（无动画）。它本质上是一个零持续时间 .to() 的补间。

The target (or targets) 目标（或多个目标） #

Next up we have to tell GSAP what we want to animate. Under the hood GSAP uses document.querySelectorAll(), so for HTML or SVG targets we can use selector text like ".class" and "#id". Or you can pass in a variable or even an Array. 接下来，我们必须告诉GSAP我们想要制作什么动画。在后台，GSAP使用 document.querySelectorAll() ，因此对于HTML或SVG目标，我们可以使用选择器文本，例如 ".class" 和 "#id" 。或者你可以传入一个变量，甚至一个数组。

// use a class or ID
gsap.to(".box", { x: 200 });

// a complex CSS selector
gsap.to("section > .box", { x: 200 });

// a variable
let box = document.querySelector(".box");
gsap.to(box, { x: 200 })

// or even an Array of elements
let square = document.querySelector(".square");
let circle = document.querySelector(".circle");
                                      
gsap.to([square, circle], { x: 200 })

// use a class or ID
gsap.to(".box", { x: 200 });

// a complex CSS selector
gsap.to("section > .box", { x: 200 });

// a variable
let box = document.querySelector(".box");
gsap.to(box, { x: 200 })

// or even an Array of elements
let square = document.querySelector(".square");
let circle = document.querySelector(".circle");
                                      
gsap.to([square, circle], { x: 200 })