Learn SVG Animation – With HTML, CSS & Javascript
Get an understanding of how these powerful animations are created using HTML, CSS, & JavaScript
Table of Contents
What you’ll learn
- Optimise SVG files for use online
- Prototype animations in the online tool Codepen
- Use Javascript to calculate the length of an SVG Path
- Create SVG’s that make use of Masks & Gradients
Requirements
- Have a text editor downloaded to their computer e.d Atom.io, Sublime Text
- If you have a vector graphics program like Adobe illustrator you can follow along but it is not required. All svg files are provided.
- Have experience writing CSS code and styling using classes
Description
Interested in improving the development of your next website? How about learning one of the hottest animation skills?
You will be able to create six SVG projects in two hours using a variety of animation techniques. Today, it is standard practice to use animation within the user interface of a website. We will explore new ways to improve your client projects through this fast-paced and effective course.
We provide all the SVG files, but we also create the SVG files in Adobe Illustrator (or similar). Videos screencast the lessons, which are explained in detail as we work through real-world projects designed specifically for this Learn SVG Animation – With HTML CSS & Javascript course.
Projects Include
– Animating Logos
– Animating Social Icons
– Hand Drawing Text
– CSS animation properties explained
– Using Gradients over Text and Icons (Cross Browser)
– Using Masks
– Using CodePen
– Introduction to SVG Optimisation Online
We recommend taking our other Learn SVG Animation – With HTML CSS & Javascript course in the series if you are a complete beginner.
Who this course is for:
- Should already know what an svg file is
- Must be familiar with HTML/CSS – does not suit an absolute beginner to coding
- For students who want to improve their svg animations and try out new techniques, but don’t know where to start
Created By: Code Collective
Last updated 8/2017
English
Size: 172.92 MB
https://www.udemy.com/course/learn-svg-animation/
