Learn Web Animation the Easy Way: An Intro to SVG and GSAP
What you'll 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
Course content
- Preview02:08
Requirements
- Students should have a good understanding of HTML, CSS & JavaScript
- Students will need a text editor to follow along with the coding videos
- Students will need someway of running the supporting files on localhost server and browser
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 needed
- No SVG knowledge is needed or expected
- Anyone with an interest in web development and animation will benefit from the skills taught in this course
Instructor
![Siggy Works](data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"%3E%3C/svg%3E){kind=avatar}
- 4.4 Instructor Rating
- 397 Reviews
- 1,905 Students
- 1 Course
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.