Learn Web Animation the Easy Way: An Intro to SVG and GSAP (Udemy.com)

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

( 84 Reviews )

Created by: Siggy Works

Produced in 2015

What you will learn

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

Quality Score

Content Quality

Video Quality

Qualified Instructor

Course Pace

Course Depth & Coverage

Overall Score : 90 / 100

Course Description

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.
Who this course is for:
Some experience with HTML/CSS/Javascript is neededNo SVG knowledge is needed or expectedAnyone with an interest in web development and animation will benefit from the skills taught in this course

Time: 3h

Instructor Details

Siggy Works

4.5 Rating
84 Reviews

Short Version

Siggy, 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 Nine

Siggy was born many moons ago as an artist, got in trouble for drawing cartoons in class, compensated by taking way too many math classes, then somehow managed to shoe-horn a computer science degree in between marathon sessions of black-jack. Then he discovered Flash, fell in love with Flash, made lots of noise and cash with Flash (apparently ad agencies love[d] it), got bored, read Bruce Mau's Incomplete Manifesto, wandered the earth like Kane for a few years while attempting to grow a beard. Shaved. Mourned the death of his dearly beloved Flash. Learned who the hell Douglas Crockford was and marveled at his kung-fu. Contemplated deeply. Very deeply. Swallowed his pride and embraced the long-scorned web maiden that is JavaScript! ...but kept his sketchbook close by.

Fire Starter Sessions Video Workshop with Danielle LaPorte

Fire Starter Sessions Video Workshop with Danielle LaPorte (2017)
4.9 (311 Reviews)

- Provider: Udemy
- Time: 3.5h

$11.99

VideoMakerFX Produce Animated Videos using VideoMaker FX

VideoMakerFX Produce Animated Videos using VideoMaker FX (2016)
4.8 (34 Reviews)

- Provider: Udemy
- Time: 1 hour on-demand videoh

$11.99

VOICE OVER ACTING -Instruction in Commercials Animation&more

VOICE OVER ACTING -Instruction in Commercials Animation&more (2021)
4.7 (156 Reviews)

- Provider: Udemy
- Time: 4.5h

$11.99

How to Make Professional 2D Animation Videos in Vyond

How to Make Professional 2D Animation Videos in Vyond (2021)
4.7 (128 Reviews)

- Provider: Udemy
- Time: 2h

$11.99

SOUND for Film and Television (2015)
4.7 (118 Reviews)

- Provider: Udemy
- Time: 2.5h

$11.99

Learn to Animate: Animation Principles (2021)
4.7 (93 Reviews)

- Provider: Udemy
- Time: 2.5h

$11.99

All video editing & animation courses

Reviews

4.5

84 total reviews

5 star 4 star 3 star 2 star 1 star

Write a Review

By Joo Pedro Pereira on 10/19/2020

Very insightful, very fun decent sized project and very fun to learn. Kudos.

By Igor tek on 10/17/2020

Little boring but goood :D

By David Aragon on 10/15/2020

This is really out dated and nothing you cant find on the GreenSock website or in YouTube videos

By Ralph von Pawelsz on 9/26/2020

Obwohl der Code auf lteren Versionen basiert habe ich mit diesem Kurs einen super praktischen Einstieg in gsap und Animationen erhalten.

By ec-ccs on 9/26/2020

Very good and easy to follow. GSAP is still a big topic and this course is short, so it should be complemented with other courses and projects to really get a full idea of the API.
More importantly: for the final project you will have the opportunity to see a professional animator at work, seeing Siggy (the mentor) using the tool to create something.

By Geordie Howell on 9/17/2020

Really clear, concise, detailed delivery of main project. Fantastic example to learn from - felt like it covered everything I needed to know. SVG section was a bit to "baby-steps" for me (nearly lost me)
Section two needs to be updated for the new version of GSAP:
//OLD
TweenMax.to("#logo1", { //do something; });
//NEW
gsap.to("#logo1", { //do something; });
Thanks heaps Siggy

By Isidoro Trevino on 9/2/2020

Great course! I only missed a lesson about adding effects on scroll but anyway it was good enough!

By Torrey Meade on 8/26/2020

Learning a lot of great tools in this course. I'm up for a job using DCO's and banner ads that relies heavily on GSAP. This course is just what I needed. The GSAP site seems a little updated so I'm not sure if I am using deprecated syntax, but everything so far seems to work fine. Thank you

By Robert Clark on 8/23/2020

Great stuff!

By Catherine Simpson on 8/18/2020

course was ok, but non of the resources would open up properly. this has left me overall disappointed with this course

By Aid Thompson on 8/4/2020

Very useful stuff. Never knew anything about SVGs and what a Tween actually was before this. Nice clear tutorial, simple, measured pace. Have recommended to friends.

By Ardak Koishybayev on 7/15/2020

It is great Intro course to web animation. Honestly, this course was enough for me to animate some features of the my future website, like menu button, menu dropdown, social icons and etc. Thank you for the course.