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

Master SVG and JavaScript animation by creating an animated eCard while learning about GreenSock and effective web animation techniques.

  • Overview
  • Curriculum
  • Instructor
  • Review

Brief Summary

This course teaches you how to create an animated eCard using JavaScript and SVG. Perfect for front-end developers, UI/UX designers, or animation fans, you'll dive into SVG graphics and the powerful GreenSock library through a fun, hands-on project-based approach.

Key Points

  • Learn why SVG is super cool and important.
  • Discover the magic of GreenSock Animation Platform.
  • Understand how to embed SVG into web pages.
  • Get to know SVG shapes, custom tags, and organization.
  • Hands-on experience building an animated eCard.

Learning Outcomes

  • Know the benefits and features of SVG graphics.
  • Master the GreenSock Animation Platform for smooth animations.
  • Organize and animate SVG elements efficiently.
  • Break down complex projects into manageable scenes.
  • Create impressive animations step-by-step.

About This Course

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.

  • 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

Instructor

Profile photo of Siggy Works
Siggy Works

Short VersionSiggy, as friends and enemies call him, is a FullStack JavaScript Developer with over 15 years of web development experience. At work he also happens to be the developer who can also draw, so inevitably always gets handed the dry-erase marker during design sessions.The Whole NineSiggy was born many moons ago as an artist, got in trouble for drawing...

Review
4.9 course rating
4K ratings
ui-avatar of Adithya Manoj V
Adithya M. V.
1.5
7 months ago

Too outdated.

  • Helpful
  • Not helpful
ui-avatar of Mayank Jaiswal
Mayank J.
5.0
11 months ago

nice explanation

  • Helpful
  • Not helpful
ui-avatar of Nikhil Tyagi
Nikhil T.
3.0
1 year ago

Outdated. Although techniques are the same, just require a bit more effort to refactor the deprecated code.

  • Helpful
  • Not helpful
ui-avatar of Ivan Masuku
Ivan M.
5.0
1 year ago

The course is great but it's a little outdated.

  • Helpful
  • Not helpful
ui-avatar of Ganesh Kumar
Ganesh K.
5.0
1 year ago

useful

  • Helpful
  • Not helpful
ui-avatar of Maiara Lopes
Maiara L.
5.0
2 years ago

Great course! Quick and easy to follow.

  • Helpful
  • Not helpful
ui-avatar of Jennifer Dubois
Jennifer D.
3.0
2 years ago

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.

  • Helpful
  • Not helpful
ui-avatar of Patricio Monpelat
Patricio M.
5.0
2 years ago

Excellent course to learn about greensock

  • Helpful
  • Not helpful
ui-avatar of Elena Weber
Elena W.
4.0
3 years ago

The course could have been so much better if it was updated. Unfortunately, it's not, and some things you'll need to google or struggle trying to make them work. Other than that, it's not a bad introduction to GSAP and SVG for beginners.

  • Helpful
  • Not helpful
ui-avatar of Konstantinos Sakkas
Konstantinos S.
4.0
3 years ago

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.

  • Helpful
  • Not helpful
Leave A Reply

Your email address will not be published. Required fields are marked *

Ratings

Courses You May Like

Lorem ipsum dolor sit amet elit
Show More Courses