- 1.5 hours on-demand video
- 9 downloadable resources
- Full lifetime access
- Access on mobile and TV
- Certificate of Completion
Get your team access to 4,000+ top Udemy courses anytime, anywhere.Try Udemy for Business
- Optimise SVG files for use online
- Prototype animations in the online tool Codepen
- Create SVG's that make use of Masks & Gradients
Introduction to SVG creation process. In this lesson we look at the steps used for each project to create the svg files we will be animating.
In this lesson we look at the settings used when creating a new project on Codepen.io. Setting to Remember.
- CSS Preprocessor - SCSS (Allows us to nest css rules and increase productivity)
- Autoprefixer - (Will ensure our animations work in whatever browser you are using)
- Normalize - Used in most production projects and a good practise to use when learning too.
Introduction to the Shapes Project. Across the next four lessons we work through an svg project from scratch.
In this lesson we use the pen tool in Adobe Illustrator to simulate using a graphics tablet for hand drawn text. Once we have our text we get setup in Codepen with a new project.
This section is based around creating three unique social media animations. Animations such as these are seen around the web and often more unexperienced developers may feel they have to copy code examples or use plugins to achieve these effects. We work through three examples to show how easily these results can be achieved once you know how.
Opacity Masks - In this lesson we look at using masks to control what parts of the svg we can see. This technique allows for some very interesting and advanced animations. By completing this animation students will know how to use css animations to reveal parts of svg shapes with another svg shape.
- 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
Looking to enhance your next web development project? Or learn one of the most sort after animation skills?
Within two hours you will have created Six SVG projects looking at a number of different animation techniques. Using animation within the user interface of a website is now standard practise. This fast and effective course will introduce use to new ways to improve your client projects.
All SVG files are provided but we do also work through creating the SVG files in Adobe Illustrator(or Similar). Lessons are taught with video screencasts, explained in detail as we work through real projects created directly for this course.
- 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
For a complete beginner to SVG we recommend taking our other course in the series.
- Should already know what an svg file is
- Should have used html/css before - not suitable for absolute beginner to coding
- Students who want to improve their svg animations and try new techniques but don't know how