greensock插件下載

The aim of the third part of this GreenSock tutorial series is to introduce you to some amazing GreenSock plugins.

本GreenSock教程系列第三部分的目的是向您介紹一些了不起的GreenSock 插件 。

You’ll be using:

您將使用：

• The BezierPlugin to animate properties along a curved Bezier path
  BezierPlugin用于沿彎曲的Bezier路徑設置屬性動畫
• The GSAP Draggable utility to drag elements on the screen and the ThrowPropsPlugin to glide them to a smooth stop
  GSAP Draggable實用程序可拖動屏幕上的元素，而ThrowPropsPlugin可將其滑動到平穩的位置
• The DrawSVGPlugin to draw SVG strokes dynamically
  DrawSVGPlugin動態繪制SVG筆劃
• The MorphSVGPlugin to morph any SVG path into any other path, even if the two paths don’t have the same number of points
  MorphSVGPlugin可以將任何SVG路徑變形為任何其他路徑，即使兩個路徑的點數相同
• And the SplitText utility to create fun animation text effects.
  和SplitText實用程序創建有趣的動畫文本效果。

By the end of this tutorial, you’ll be able to create complex types of web animations in a fraction of the time that it would normally take without using GreenSock’s plugins.

到本教程結束時，您將能夠在不使用GreenSock插件的情況下，花費通常所需時間的一小部分來創建復雜類型的網絡動畫。

For an introduction to the basics of GreenSock, including how to work with TweenMax for sequencing and staggering simple animations, head over to part 1 of this multi-part article.

有關GreenSock基礎知識的介紹，包括如何與TweenMax一起使用以對簡單動畫進行排序和交錯，請繼續閱讀本多篇文章的第1部分。

If you’re looking for a refresher on GreenSock’s powerful timeline (TimelineLite and TimelineMax), check out Part 2.

如果您想在GreenSock的功能強大的時間軸(TimelineLite和TimelineMax)上重新學習一下，請參閱第2部分 。

The GreenSock articles are part of the series Beyond CSS: Dynamic DOM Animation Libraries. Here’s what I covered in the past instalments:

GreenSock文章是Beyond CSS：動態DOM動畫庫系列文章的一部分。 這是我過去分期介紹的內容：

• Animating the DOM with Anime.js touches on how to make the best use of animation on the web and when you could consider using a JavaScript animation library instead of CSS-only animation. It then focuses on Anime.js, a free and lightweight JavaScript animation library

  使用Anime.js對DOM進行動畫處理將介紹如何充分利用網絡上的動畫，以及何時可以考慮使用JavaScript動畫庫而不是僅CSS動畫。 然后重點介紹Anime.js，這是一個免費的輕量級JavaScript動畫庫

• Fun Animation Effects with KUTE.js introduces you to KUTE.js, a free and feature-rich JavaScript animation library

  帶有KUTE.js的有趣動畫效果向您介紹KUTE.js，這是一個免費且功能豐富JavaScript動畫庫

• Make Your Website Interactive and Fun with Velocity.js (No jQuery) shows you how to use Velocity.js, an open source, robust free animation library, to create performant web animations.

  使用Velocity.js(無jQuery)使您的網站具有互動性和趣味性(沒有jQuery)向您展示了如何使用Velocity.js(一個開源的，功能強大的免費動畫庫)來創建高效的Web動畫。

• GreenSock for Beginners: a Web Animation Tutorial (Part 1) is an overview of GreenSock, also known as GSAP (GreenSock Animation Platform), where I discuss the library’s modules and licensing model. I also show you how to code a simple tween, sequences of tweens, and staggering animations using GSAP TweenMax

  GreenSock面向初學者：Web動畫教程(第1部分)概述了GreenSock，也稱為GSAP(GreenSock動畫平臺)，在此我討論庫的模塊和許可模型。 我還將向您展示如何使用GSAP TweenMax編寫簡單的補間，補間序列和交錯動畫的代碼

• GreenSock for Beginners (Part 2): GSAP’s Timeline delves into GSAP’s timeline functionality teaching you how to organize your animations inside a timeline or multiple nested timelines.

  面向初學者的GreenSock(第2部分)：GSAP的時間軸深入研究GSAP的時間軸功能，教您如何在一個時間軸或多個嵌套的時間軸中組織動畫。

使用GreenSock的BezierPlugin沿著路徑動畫 (Animation Along a Path with GreenSock’s BezierPlugin)

Motion along a path consists in objects following a predefined path like a curved path or a zigzag path, etc. In the right context, it can be crucial for realistic animation.

沿著路徑的運動包括遵循預定路徑(例如彎曲路徑或鋸齒形路徑等)的對象。在正確的上下文中，這對于逼真的動畫至關重要。

This kind of animation is possible using SMIL (Synchronized Multimedia Integration Language), which is being deprecated.

使用不推薦使用的SMIL(同步多媒體集成語言)可以實現這種動畫。

The future of motion along a path seems to be CSS, but although the feature is supported in a few browsers (mostly Chrome and Opera), adopting it in production websites could be a risky move.

沿途發展的未來似乎是CSS，但是盡管某些瀏覽器 (主要是Chrome和Opera) 支持該功能，但在生產網站中采用該功能可能是一個冒險的舉動。

For consistent browser support and ease of implementation, GSAP’s BezierPlugin is a fantastic option.

為了獲得一致的瀏覽器支持和易于實施，GSAP的BezierPlugin是一個不錯的選擇。

This is a free plugin included with TweenMax. Let’s try it out!

這是TweenMax附帶的免費插件。 讓我們嘗試一下！

GreenSock的BezierPlugin基礎知識 (GreenSock’s BezierPlugin Basics)

To get started with GSAP’s BezierPlugin, just download TweenMax and include it into your project like you would with any external JavaScript file at the bottom of your HTML document.

要開始使用GSAP的BezierPlugin，只需下載TweenMax并將其包含在您的項目中，就像在HTML文檔底部的任何外部JavaScript文件一樣。

The basic syntax looks like this:

基本語法如下：

TweenMax.to(document.getElementById('myDiv'), 5, {bezier:[{left:100, top:250}, {left:300, top:0}, {left:500, top:400}], ease:Power1.easeInOut });

The snippet above implements TweenMax to() method on the .myDiv element. Among the properties, you can see the bezier property with its value set to an array of objects. Each object contains the values for a couple of coordinates. The example uses top and left properties, but you could as well use x and y.

上面的代碼段在.myDiv元素上實現了TweenMax to()方法。 在這些屬性中，您可以看到bezier屬性，其值設置為對象數組。 每個對象都包含幾個坐標的值。 該示例使用top和left屬性，但您也可以使用x和y 。

If you have a long list of coordinates, it’s a good idea to cache them in a variable and use this instead of the object itself inside your function, like this:

如果坐標列表很長，則最好將它們緩存在變量中，然后使用它代替函數內部的對象本身，如下所示：

const points = [{left:100, top:250}, {left:300, top:0}, {left:500, top:400} ];TweenMax.to(document.getElementById('myDiv'), 5, {bezier: points, ease:Power1.easeInOut });

If you use x and y to set your coordinates, remember that the values refer to the element’s position, not the canvas itself. For example, x: 10 moves the element from 10 to the right with respect to the location the element is currently at. The following points will still be relative to the element’s initial position rather than the point previously specified.

如果使用x和y設置坐標，請記住，值是指元素的位置，而不是畫布本身。 例如， x: 10相對于元素當前所在的位置將元素從10向右移動。 以下點仍將相對于元素的初始位置，而不是先前指定的點。

If you’d like your element to move smoothly from one set of coordinates to the next, the BezierPlugin offers two options:

如果您希望元素從一組坐標平滑地移動到下一組坐標，則BezierPlugin提供了兩個選項：

• Set the type property to 'soft'. This way, the coordinates you provide act as magnets, which attract the element towards them. However, the element won’t be traveling through the specified points

  將type屬性設置為'soft' 。 這樣，您提供的坐標就像磁鐵一樣，將元素吸引向它們。 但是，元素不會穿越指定的點

• Set the type property to 'thru', which is the default value, and specify a value for the curviness property. This special properties lets you define the tension on the Bezier: 0 is equivalent to a straight line, 1 is the normal curviness, 2 is twice the normal value, etc. The curviness property applies only in case you set the type property to 'thru'.

  將type屬性設置為'thru' ，這是默認值，并為curviness屬性指定一個值。 此特殊屬性使您可以定義貝塞爾曲線上的張力：0等于直線，1是正常彎曲度，2是正常值的兩倍， curviness 。 curviness屬性僅在將type屬性設置為'thru'情況下適用'thru' 。

You can also set the autoRotate property to true, which has the effect of making the element spin according to its position on the Bezier path.

您還可以將autoRotate屬性設置為true ，其作用是使元素根據其在Bezier路徑上的位置旋轉。

Below is a demo of how these properties work: select a curviness value, check or uncheck the checkbox to set the autoRotate property, and pick either 'thru' or 'soft' using the appropriate radio button.

下面是這些屬性如何工作的演示：選擇一個curviness值，選中或取消選中復選框以設置autoRotate屬性，并使用適當的單選按鈕選擇'thru'或'soft' 。

Note that the default value of the type property is 'thru' and that when you select 'soft', the dropdown box to set the curviness value will be disabled:

請注意， type屬性的默認值為'thru' ，并且當您選擇'soft' ，將禁用用于設置curviness值的下拉框：

See the Pen GSAP BezierPlugin by SitePoint (@SitePoint) on CodePen.

請參閱CodePen上的SitePoint( @SitePoint )提供的Pen GSAP BezierPlugin 。

SVG graphics designed with the Vecteezy Editor

使用Vecteezy編輯器設計的SVG圖形

For more details on how to use GSAP’s BezierPlugin, check out these links:

有關如何使用GSAP的BezierPlugin的更多詳細信息，請查看以下鏈接：

• BezierPlugin docs

  BezierPlugin文檔

• YouTube video on selecting coordinate points by IHateTomatoes

  有關通過IHateTomatoes選擇坐標點的 YouTube視頻

• If you plan on using the BezierPlugin with inline SVGs, then you’ll need the MorphSVGPlugin.pathDataToBezier() function to convert SVG path data into bezier anchor points and feed the result to the values property.

  如果計劃將BezierPlugin與內聯SVG一起使用，則需要MorphSVGPlugin.pathDataToBezier()函數將SVG路徑數據轉換為bezier錨點，并將結果提供給values屬性。

GreenSock的高級插件和實用程序 (GreenSock’s Premium Plugins and Utilities)

You can accomplish a great deal with TweenMax and all the goodness it provides, but to go the extra mile GreenSock’s premium plugins and utilities are mind blowing.

您可以使用TweenMax及其提供的所有優點來完成很多工作，但是要付出更多的努力，GreenSock的高級插件和實用程序令人震驚。

To download the premium stuff to your local dev environment or to your own website, you’ll need at least a Shockingly Green membership to Club GreenSock.

要將高級內容下載到您本地的開發環境或您自己的網站上，您至少需要Club GreenSock的Shockingly Green會員資格。

However, visit this magic CodePen demo and as long as your GSAP animation lives on CodePen, you’ll get to play with GSAP’s premium plugins for free.

但是，請訪問此神奇的CodePen演示 ，只要您的GSAP動畫存在于CodePen上，您就可以免費使用GSAP的高級插件。

To get started, you can simply click on the Copy button to copy the plugin’s URL and add it to your own Pen.

首先，您只需單擊復制按鈕即可復制插件的URL并將其添加到您自己的Pen中。

Alternatively, simply click on the Collection button to fork one of the many GreenSock’s demos using the plugin you’re interested in and use it as a starting point.

另外，只需單擊“ 收藏”按鈕，即可使用您感興趣的插件來分叉GreenSock的許多演示之一，并將其??用作起點。

Time to get stuck in!

是時候陷入困境了！

使用GreenSock的Draggable和ThrowProps進行拖放 (Drag & Drop with GreenSock’s Draggable and ThrowProps)

Draggable is an awesome utility library that lets you code a drag & drop animation in no time. Not only that, but your code will be cross-browser compatible, device-enabled for touchscreens, performant, and consistently applicable to both HTML and SVG elements.

Draggable是一個很棒的實用程序庫，可讓您立即編寫拖放動畫。 不僅如此，您的代碼還將與跨瀏覽器兼容，可在觸摸屏上啟用設備，高效且始終適用于HTML和SVG元素。

When paired with the ThrowPropsPlugin, Draggable produces gliding physics-like motions on the screen.

當與ThrowPropsPlugin配對時，Draggable在屏幕上產生類似于物理學的滑動動作。

Here’s a simple implementation:

這是一個簡單的實現：

Draggable.create('#yourID');

You can now drag the element with id of yourID both horizontally and vertically.

現在，您可以水平和垂直拖動id為yourID的元素。

If you’d like your element to be constrained within given bounds, leverage the bounds property. For extra smoothness, download and add the ThrowPropsPlugin. To use it, just set throwProps to true, like this:

如果您希望將元素限制在給定范圍內，請利用bounds屬性。 為了獲得額外的平滑度，請下載并添加ThrowPropsPlugin。 要使用它，只需將throwProps設置為true ，如下所示：

Draggable.create('#yourID', {bounds: '.container',throwProps: true });

Now, the draggable element can’t be dragged beyond the boundaries of the element with the .container class.

現在，使用.container類不能將可拖動元素拖動到該元素的邊界之外。

To lock the direction of the dragging motion either horizontally or vertically, type something like this:

要水平或垂直鎖定拖動運動的方向，請鍵入以下內容：

Draggable.create('#yourID', {bounds: '.container',throwProps: true,type: 'y' //only vertical scroll });

The element will now be draggable only along the vertical axis. To change this into the horizontal axis, replace 'y' with 'x' as value of the type property.

現在，該元素僅可沿垂直軸拖動。 要將其更改為水平軸，請將'y'替換為'x'作為type屬性的值。

You can set the type property to the value of 'rotation'. In this case, instead of being able to drag the element horizontally and/or vertically, you’ll be able to spin it in a circular movement.

您可以將type屬性設置為'rotation'的值。 在這種情況下，您將無法以水平和/或垂直方向拖動元素，而是以圓周運動旋轉它。

Here’s a CodePen demo that uses this type of animation:

這是使用這種動畫的CodePen演示：

See the Pen ThrowProps and Draggable Demo by SitePoint (@SitePoint) on CodePen.

見筆ThrowProps和可拖動的演示由SitePoint( @SitePoint上) CodePen 。

SVG graphics designed with the Vecteezy Editor

使用Vecteezy編輯器設計的SVG圖形

Three things you may notice about this demo:

您可能會注意到此演示的三件事：

• Draggable has useful callback functions like onDragStart(), onDragEnd(), etc., that you can use to do your stuff in relation to the stages of the dragging motion

  Draggable具有有用的回調函數，例如onDragStart() ， onDragEnd()等，您可以使用它們來完成與拖動動作的階段有關的工作

• GreenSock can also manipulate CSS variables or custom properties, which is an awesome feature added to the library’s latest release.

  GreenSock還可以操縱CSS變量或自定義屬性 ，這是添加到庫的最新版本中的很棒的功能。

• GreenSock provides svgOrigin, which is a special property included in the CSSPlugin (packaged with TweenMax). With svgOrigin, you can set the transformOrigin in the SVG’s global coordinate space rather than relatively to the element itself. To come up with the numbers you could use Illustrator for help, but I mostly refined the choice by trial and error.

  GreenSock提供了svgOrigin ，這是CSSPlugin(與TweenMax打包在一起)中包含的一個特殊屬性 。 使用svgOrigin ，可以在SVG的全局坐標空間而不是相對于元素本身中設置transformOrigin。 為了得出數字，您可以使用Illustrator尋求幫助，但是我主要是通過反復試驗來完善選擇。

For more details on Draggable and the ThrowPropsPlugin, visit these resources:

有關Draggable和ThrowPropsPlugin的更多詳細信息，請訪問以下資源：

• Draggable docs

  可拖動文檔

• ThrowPropsPlugin docs

  ThrowPropsPlugin文檔

• GreenSock’s curated demos collection on CodePen

  GreenSock在CodePen上策劃的演示集合

• Some of Sarah Drasner’s Draggable demos on CodePen (feel free to study them all, it’ll be worth it):

  莎拉·德拉斯納(Sarah Drasner)在CodePen上的一些Draggable演示(隨時研究它們，這是值得的)：

  https://codepen.io/collection/DNRrdY/

  https://codepen.io/collection/DNRrdY/

  https://codepen.io/sdras/pen/gbERKQ

  https://codepen.io/sdras/pen/gbERKQ

實時繪圖SVG使用GreenSock的DrawSVGPlugin繪制動畫 (Live-Drawing SVG Strokes Animation with GreenSock’s DrawSVGPlugin)

With GreenSock’s DrawSVGPlugin you can quickly create an SVG graphic that looks like it’s drawing itself on the screen.

使用GreenSock的DrawSVGPlugin，您可以快速創建一個SVG圖形，看起來就像在屏幕上繪制的一樣。

Creating this kind of animation with only CSS is not complicated. However, GSAP offers some advantages:

僅使用CSS創建這種動畫并不復雜。 但是，GSAP具有一些優點：

• You can work with simple SVG shapes like rect, circle, etc., which don’t have a getTotalLenght() method (you need this method to calculate the length of the SVG stroke)

  您可以使用簡單的SVG形狀(例如矩形，圓形等)，這些形狀沒有getTotalLenght()方法(您需要此方法來計算SVG筆觸的長度)

• getTotalLength() won’t adjust when you scale the SVG to work responsively on different screen sizes. With DrawSVG you won’t have to worry about this

  當您縮放SVG以便在不同的屏幕尺寸上響應地工作時， getTotalLength()不會調整。 有了DrawSVG，您將不必為此擔心

• With DrawSVG you can animate the stroke using integers, booleans (i.e., true or false), and percentages, and have a wider range of possibilities.
  使用DrawSVG，您可以使用整數，布爾值(即true或false)和百分比來對筆劃進行動畫處理，并且具有更多的可能性。

To start using it, you can try out something like this:

要開始使用它，您可以嘗試如下操作：

TweenLite.fromTo("#path", 1, {drawSVG:"0 5%" }, {drawSVG:"95% 100%" });

For the animation to work, your SVG needs to have a stroke defined, either in the SVG itself as a presentational attribute or in CSS:

為了使動畫正常工作，您的SVG需要定義筆畫，無論是在SVG本身中作為表示屬性還是在CSS中：

// Define a stroke and stroke-width in CSS: #path {stroke-width: 5px;stroke: blue; }

To stagger more than one SVG stroke, you can simply use GSAP stagger methods. The DrawSVGPlugin is seamlessly integrated with the GSAP API. For example:

要交錯多個SVG筆劃，可以簡單地使用GSAP交錯方法。 DrawSVGPlugin與GSAP API無縫集成。 例如：

/* All elements with the class of .element will have a stroke animation with a 0.1 delay between each of them during 1 second */TweenMax.staggerFrom(".element", 1, {drawSVG: 0 }, 0.1);

Here’s a live demo with the DrawSVGPlugin at work:

這是使用DrawSVGPlugin的實時演示：

See the Pen GSAP DrawSVGPlugin by SitePoint (@SitePoint) on CodePen.

請參閱CodePen上的SitePoint( @SitePoint )提供的Pen GSAP DrawSVGPlugin 。

For more details, don’t miss these resources:

有關更多詳細信息，請不要錯過以下資源：

• DrawSVGPlugin docs

  DrawSVGPlugin文檔

• GreenSock’s curated demos collection on CodePen.

  GreenSock在CodePen上策劃的演示集 。

使用GreenSock的MorphSVGPlugin進行變形的動畫 (Shape Shifting Animation with GreenSock’s MorphSVGPlugin)

Using GSAP’s MorphSVGPlugin lets you morph one SVG shape into another with one line of code, even if the number of path points between the two shapes is uneven.

使用GSAP的MorphSVGPlugin ，即使兩個形狀之間的路徑點數量不均勻，也可以用一行代碼將一個SVG形狀變形為另一種。

This allows for some cool effects with relatively little effort.

這樣就可以以相對較少的努力獲得一些很酷的效果。

You can start using the MorphSVGPlugin with something as simple as this:

您可以像下面這樣簡單地開始使用MorphSVGPlugin：

TweenLite.to("#circle", 1, {morphSVG:"#square" });

The SVG’s #circle element will morph into the #square element over a period of 1 second.

SVG的#circle元素將在1秒的時間內變為#square元素。

As you can see, the plugin is perfectly integrated with GSAP’s methods, therefore in the snippet above there’s nothing that you don’t already know.

如您所見，該插件與GSAP的方法完美集成，因此在上面的代碼片段中，您沒有什么不知道的。

If you prefer, you can feed the function the path data instead of #square.

如果愿意，可以向函數提供路徑數據，而不是#square 。

Check out how it works in this demo:

查看此演示中的工作原理：

See the Pen GSAP MorphPlugin by SitePoint (@SitePoint) on CodePen.

請參閱CodePen上的SitePoint( @SitePoint )提供的Pen GSAP MorphPlugin 。

Background photo by Luca Zanon on Unsplash.com

Luca Zanon在Unsplash.com上拍攝的背景照片

If your SVG is using simple shapes instead of paths, MorphSVG can deal with this too. Just use the MorphSVGPlugin.convertToPath() function, which does what it says on the tin: it converts the shape into a path, so that GSAP can morph it.

如果您的SVG使用的是簡單形狀而不是路徑，MorphSVG也可以解決此問題。 只需使用MorphSVGPlugin.convertToPath()函數，該函數MorphSVGPlugin.convertToPath()執行其提示：將形狀轉換為路徑，以便GSAP可以對其進行變形。

Here’s another demo that shows this in action:

這是另一個演示此操作的演示：

See the Pen GSAP MorphSVG Plugin with Shapes by SitePoint (@SitePoint) on CodePen.

見筆GSAP MorphSVG插件與形狀由SitePoint( @SitePoint上) CodePen 。

SVG graphics designed with the Vecteezy Editor

使用Vecteezy編輯器設計的SVG圖形

For more on GSAP’s MorphSVGPlugin, check out these resources:

有關GSAP的MorphSVGPlugin的更多信息，請查看以下資源：

• MorphSVGPlugin docs

  MorphSVGPlugin文檔

• GreenSock’s curated demos collection on CodePen.

  GreenSock在CodePen上策劃的演示集 。

使用GreenSock的SplitText實用程序實現有趣的文字效果 (Fun Text Effects with GreenSock’s SplitText Utility)

The right animation can make text on the web more engaging and fun. GSAP offers a number of plugins to manipulate text, but my favorite is SplitText.

正確的動畫可以使網絡上的文本更具吸引力和樂趣。 GSAP提供了許多用于處理文本的插件，但我最喜歡的是SplitText 。

With a few lines of code, you can split your text into sentences, words, or characters, and then animate them to your heart’s content.

只需幾行代碼，您就可以將文本拆分為句子，單詞或字符，然后將它們設置為動畫內容。

Here’s a basic example:

這是一個基本示例：

const el = document.getElementById('elID'); const split = new SplitText(el, {type: 'lines, words, chars' });

el contains some text, and split contains a splitText instance you can use to manipulate your text.

el包含一些文本， split包含可用于操作文本的splitText實例。

For example, split.lines contains an array of your text split into lines, which you can then easily animate with the GreenSock’s API.

例如， split.lines包含分成幾行的文本數組，然后您可以輕松地使用GreenSock的API制作動畫。

Behind the scenes, GSAP adds some extra <div> elements around each line, word, or sentence. This enables the code to target those containers and animate them separately.

在后臺，GSAP在每行，每個單詞或句子周圍添加了一些額外的<div>元素。 這使代碼可以將這些容器作為目標并分別為其設置動畫。

To get rid of the additional markup after you’re done with the animation, GreenSock has the handy revert() function, that you can call inside the onComplete() callback function:

為了在完成動畫后擺脫其他標記，GreenSock提供了方便的revert()函數，您可以在onComplete()回調函數中調用該函數：

onComplete: function() {split.revert(); }

Here’s SplitText at work in this live demo:

這是此實時演示中的SplitText：

See the Pen GSAP SplitText Utility by SitePoint (@SitePoint) on CodePen.

見筆GSAP SplitText工具由SitePoint( @SitePoint )上CodePen 。

Background photo courtesy of Unsplash.com

背景圖片由Unsplash.com提供

To learn more, head over to these resources:

要了解更多信息，請訪問以下資源：

• SplitText docs

  SplitText文檔

• GreenSock’s curated demos collection on CodePen.

  GreenSock在CodePen上策劃的演示集 。

結論 (Conclusion)

Congratulations! You’ve made it to the end of this mini series dedicated to GreenSock. By now you should be able to include GSAP into your projects and add some animation magic to your website.

恭喜你！ 您已經完成了有關GreenSock的迷你系列的結尾。 到現在為止，您應該能夠將GSAP包含到您的項目中，并向網站添加一些動畫魔術了。

GreenSock offers tons of possibilities with its rich API and plugins, therefore to become an expert, head over to the docs pages and keep practicing. If you come up against any hurdles, don’t hesitate to join the GreenSock’s Forums, a friendly and super helpful place with dedicated GSAP Ninjas who will certainly give you a hand.

GreenSock憑借其豐富的API和插件提供了無數種可能性，因此，要成為專家，請前往docs頁面并繼續練習。 如果您遇到任何障礙，請立即加入GreenSock論壇 ，這是一個友好而樂于助人的地方，這里有專門的GSAP忍者，他們一定會幫到您的。

This also concludes my excursion into JavaScript animation libraries. Now, it’s over to you, create your own animations and make the web a more beautiful place.

這也結束了我對JavaScript動畫庫的游覽。 現在，交給您，創建自己的動畫并使網絡更美麗。

翻譯自: https://www.sitepoint.com/fancy-web-animations-made-easy-greensock-plugins/

greensock插件下載

總結

以上是生活随笔為你收集整理的greensock插件下载_使用GreenSock插件轻松制作精美的Web动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。