SVG Animation with JavaScript

You feel comfortable with SVG and CSS animations, but there’s something missing, isn't there? Because CSS animations can take us only so far. If you wish to take your animation skills to another level, SVG Animation with JavaScript is the course for you
Course info
Rating
(14)
Level
Intermediate
Updated
Jul 9, 2018
Duration
54m
Table of contents
Description
Course info
Rating
(14)
Level
Intermediate
Updated
Jul 9, 2018
Duration
54m
Description

Have you ever struggled creating SVG animations with CSS? If so, this is the perfect course for you. In this course, SVG Animation with JavaScript, you will learn how to animate in an easy and maintainable way. First, we will get to know the different native and external libraries available in the browser. Next, we will learn how to prototype animations and finally, we will learn how to animate our SVGs using the GreenSock Animation Platform. When you’re finished with this JavaScript course, you will not only be able to create impressive animations with GreenSock but also you will feel comfortable enough to be creative without any technological concern. Software required: Adobe Illustrator and a Code Editor like Visual Studio Code.

About the author
About the author

Eva Ferreira is a freelance Front-End developer with a passion for teaching, currently working on CSSConf Argentina!

Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
(music) Hi everyone. My name is Eva Ferreira and welcome to my SVG Animation with JavaScript course. I am a front-end developer and goal developer expert who loves animation. In this course we are going to learn how to animate illustrations using JavaScript. Some of the major topics that we will cover include how to prototype animations from the original idea to getting the right assets, how to correctly export and optimize your SVGs using Adobe Illustrator, how to choose the correct library for your project from native libraries to external resources, how to animate using the GreenSock animation platform and how to export animations from After Effects into fully functional code with just a few clicks. By the end of this course you will know how to build animations from the ground up using not only JavaScript, but also your creativity in the full process. Before beginning the course you should be familiar with basic JavaScript and SVG. I hope you will join me in this journey to learn animation with the SVG with JavaScript Animation course at Pluralsight.

Getting Started
Hello and welcome to the SVG Animation with JavaScript course. In this course we'll learn how to animate pictographics using JS and more specifically how to animate them using GreenSock. But first of all let's talk about the different animation techniques that are available so we can pick the right tool for every animation project. There are two types of animation techniques. The native and the external. The native options are a way of animating without any additional scripts using everything the browser has to offer, and external are different libraries, mostly JavaScript, that we can use to animate faster and with better browser support. If we look into the native category we can find CSS, which is an amazing way of animating without too much trouble and with great performance. We should also mention SMIL which has been around for a while, but is currently being deprecated in some browsers. There is also the Web Animations API. This is a way to animate HTML and SVG by using JavaScript. It doesn't have a great browser support yet, but you can use a polyfill and when it comes to external libraries we can find hundreds of different options. The most common ones are Velocity. js, GreenSock, and BodyMovin.

Animating SVG with GSAP
In this part of the course we will begin working with the GreenSock framework and animating our interfaces with JavaScript. GreenSock is also known as GSAP, short for GreenSock Animation Platform. And it might come as a surprise, but GreenSock was originally built for Adobe Flash a lot of years ago. It used to work as an additional animation tool for Action Script. A lot has happened since then and now GSAP is known as a wonderful tool to animate HTML file interfaces. Because that's basically what GreenSock does today. It animates elements on the web. It doesn't matter if you want to animate a detail or an SVG element. The most wonderful thing about this animation tool is that you no longer need to worry about browser support or different cross-browsers' behaviors. Since GreenSock can actually reach Internet Explorer 7 with animations made on HTML elements and Internet Explorer 9 with SVG animations. And that's the best part of it. You no longer need to worry about the boring stuff and that means that you have more time to let your creativity go wild without limits. So before we get into animating with JavaScript I would like to mention two links. The first one is the official GreenSock forum which is a great place to ask any questions you have. The community there is very nice and big enough to help you solve any issues you find. And the second link I would like to share with you is a showcase of real-life examples that GSAP put together so you can get inspiration and learn how far you can take your animation ideas with this great tool.

Other Animation Libraries
If we don't fill libraries in JavaScript there are a few libraries out there that will let us animate SVG without too much hassle. I have chosen my two favorites. They are quite different from one another, but that's the idea. They will let you do different things in different ways. First of all, let me introduce you to Vivus. JS. This is a small JavaScript library that will let you animate lines as if someone was drawing them. You can trigger these animations on page load or on a scroll. The library has no dependencies, which makes it really small, but it only has a few options available so if you want to create something crazy, this might not be the library for you. The other library I would like to mention is not really a JavaScript library, but an After Effects extension. It's called BodyMovin. It will turn your animations into code. Recently BodyMovin has joined a project called Lottie by Airbnb. So if you want to go there right now you could find this as Lottie as well. The fact that BodyMovin is the tool to export animation from After Effects makes it a wonderful resource to working teams where there are developers and motion designers.