English | MP4 | AVC 1920×1080 | AAC 48KHz 2ch | 1.5 Hours | 203 MB
Learn how these powerful animation are created using HTML,CSS & Javascript
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.
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
For a complete beginner to SVG we recommend taking our other course in the series.
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
Table of Contents
Welcome To The Course
1 Course Introduction & Outline
Workflow setup and tools for course project
2 Create an SVG and access the code
3 Optimise Code with OMGSVG
4 Starting a New Project on Codepen.io
SVG Project – Animating a Logo
5 Introduction to Project
6 Drawing The SVG
7 Create Line Animations
8 Javascript Line Calculation
9 Add Final Animations
Animation Properties
10 Monkey Animation
11 CSS Animations – FROMTO – Using Percentages
12 Line Animation Directions
Hand Drawn Text Animation Project
13 Create SVG Text
14 Animate Text Writing Effect
Social Icons Project
15 Project Introduction
16 Twitter Animation
17 Youtube Animation
18 Facebook Animation
Masking & Gradients
19 Gradient Project
20 Using Texture’s
21 Advanced Masking Technique
Course Close
22 Congratulations & Thank You
Resolve the captcha to access the links!