Udemy

Learn Web Animation the Easy Way: An Intro to SVG and GSAP

立即報名
  • 3,352 名學生
  • 更新於 12/2020
  • 可獲發證書
4.4
(622 個評分)
CTgoodjobs 嚴選優質課程,為職場人士提升競爭力。透過本站連結購買Udemy課程,本站將獲得推廣佣金,有助未來提供更多實用進修課程資訊給讀者。

課程資料

報名日期
全年招生
課程級別
學習模式
修業期
3 小時 10 分鐘
教學語言
英語
授課導師
Siggy Works
證書
  • 可獲發
  • *證書的發放與分配,依課程提供者的政策及安排而定。
評分
4.4
(622 個評分)
7次瀏覽

課程簡介

Learn Web Animation the Easy Way: An Intro to SVG and GSAP

Create an animated eCard with just JavaScript and SVG in record time

If you're a front-end developer, UI/UX designer or just a general web animation enthusiast you'll benefit from the techniques taught in this course. We use a project-based approach to introduce you to the SVG graphics format and GreenSock Animation Platform--possibly the most powerful and performant javascript animation library available today.

While building a complex animated greeting card, you'll learn:

• Why SVG is a hot commodity today

• The benefits of using SVG

• About SVG shapes and custom tags

• How to include SVG on a web page

• How to organize SVG elements for web animation

• What the GreenSock Animation Platform is

• Make sense of GreenSock's different bundles and which to use

• The GreenSock API and its six basic tweening functions

• All about timelines and how they work in GreenSock

• How to break down the SVG project into scenes

• How to create catchy, impressive animations piece-by-piece

• How to use timelines to organize your entire animation sequences

• And much more...

All project files with full source code will be made available to you at each step of the animation process. Learn valuable skills that will benefit you through out your career or open up a whole new world of creative expression if you're a hobbyist or enthusiast.

課程章節

  • 4 個章節
  • 15 堂課
  • 第 1 章 Start Here
  • 第 2 章 SVG Basics
  • 第 3 章 GreenSock Basics
  • 第 4 章 Animation Project

課程內容

  • Understand SVG and the benefits of using it today
  • Embed SVG on a web page and organize SVG elements for web animation
  • Gain hands-on experience with the GreenSock Animation Platform and how to animate anything with it
  • Master how to easily breakdown an SVG project into scenes and timelines in GreenSock
  • Create a complex, fully animated greeting card, step-by-step and ready to share with friends


評價

  • C
    Cuno Vollenweider
    4.5

    Gute Erklärungen und spannende Beispiele.

  • J
    Jennifer Dubois
    3.0

    It was a good experience with a good teacher, but it is teaching an old version GSAP. I started this course a few years ago but quit, because nothing was working for me and I didn't know why. After gaining more experience in web development, and more confidence in figuring out why things don't work, I came back to this course determined to figure out what I needed to, and am now familiar with current GSAP syntax and I feel a little proud of myself for getting things to work despite the lack of updates from the instructor, and I appreciate that he left a note that he would not be updating it. I learned from the course anyway.

  • K
    Konstantinos Sakkas
    4.0

    It's a good learning source. Good and clear explanations. Quick reply whenever it was needed. However it is somewhat outdated, and you might have to do some research into how to make it work with more modern syntax. Overall a great first introduction to GSAP and what it can do.

  • G
    George Wilkins
    3.5

    I learned a lot from this course, but there are some short comings (creating SVG screen is only an overview and jquery is used for the final project). Plus, I recently learned that there are changes in the newer versions of GSAP which make this course outdated (taught in GSAP 1, current GSAP 3/5 uses a new object reference).

立即關注瀏覽更多

本網站使用Cookies來改善您的瀏覽體驗,請確定您同意及接受我們的私隱政策使用條款才繼續瀏覽。

我已閱讀及同意