Learn SVG Animation - With HTML, CSS & Javascript
4.3 (763 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
13,325 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Learn SVG Animation - With HTML, CSS & Javascript to your Wishlist.

Add to Wishlist

Learn SVG Animation - With HTML, CSS & Javascript

Learn how these powerful animation are created using HTML,CSS & Javascript
Best Seller
4.3 (763 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
13,325 students enrolled
Created by Code Collective
Last updated 8/2017
English
English [Auto-generated]
Current price: $10 Original price: $65 Discount: 85% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 1.5 hours on-demand video
  • 9 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I 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
View Curriculum
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

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. 


Who is the target audience?
  • 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
Compare to Other Animation Courses
Curriculum For This Course
22 Lectures
01:23:03
+
Welcome To The Course
1 Lecture 02:21

Introduction to the course and walkthrough of each of the lessons include. This lesson should give you an understanding of what projects you will work on through the course.

Preview 02:21
+
Workflow setup and tools for course project
3 Lectures 07:23

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. 

Preview 02:52

Optimise .svg files online. In this lesson we go through the process of using the online tool OMG SVG to improve our svg creations by making the code a smaller file size and easier to read.

Optimise Code with OMGSVG
01:14

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.
Preview 03:17
+
SVG Project - Animating a Logo
5 Lectures 18:46

Introduction to the Shapes Project. Across the next four lessons we work through an svg project from scratch. 

Preview 01:08

Creating the SVG.

  • Draw out shape/logo in Adobe Illustrator (also available as a downloadable file)
  • Access the code behind the svg
  • Optimse the code online
  • Import and setup our CodePen project
Drawing The SVG
04:53

In this Lesson we look at creating line animations in svg. Students will recap the stroke-dasharray/stroke-dashoffset technique of creating animations where lines of the svg shape are drawn out.

Create Line Animations
04:47

In this lesson we look at using Javascript to calculate the length of a shape's outline. Using the javascript calculated length allows for faster prototyping and more efficient project creation. 

Javascript Line Calculation
04:12

Finish the svg animation for the shapes logo. In this Lesson we what we learnt about javascript calculations to add another line animation along with two more rotational animations.

Add Final Animations
03:46
+
Animation Properties
3 Lectures 13:36

The purpose of this lesson is to take a longer look at the animation properties we have been using in our projects.

  • stroke-dasharray
  • stroke-dashoffset
  • animation-name
  • animation-duration
  • animation-iteration-count
  • animation-direction
  • animation-timing-function
  • animation-fill-mode
Monkey Animation
08:27

This lesson aims to work through the difference between using a from/to animation and a percentage based animation e.g 10/50/100.

CSS Animations - FROM/TO - Using Percentages
02:11

You may find depending on how you created your svg in adobe illustrator you animation might run backwards. We look at the four possibilities for drawing/un-drawing you svg shapes.

Line Animation Directions
02:58
+
Hand Drawn Text Animation Project
2 Lectures 06:03

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. 

Preview 01:57

We use what we learned in the previous lesson about animation directions to make sure our hand drawn text is drawn out in the correct way. This is a popular and much requested technique.

Animate Text Writing Effect
04:06
+
Social Icons Project
4 Lectures 14:13

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.

Project Introduction
01:22

Twitter Icon - In this lesson we work through creating a custom animation for our Twitter icon. 

  • Circle outline should disappear as twitter outline burst off icon
Twitter Animation
04:23

Youtube Icon - In this lesson we work through creating a custom animation for our Youtube icon.

  • Circle outline should expand as inner circle and logo invert colours
Youtube Animation
04:05

Facebook Icon - In this lesson we work through creating a custom animation for our Facebook icon.

  • Outer circle expands as new sunburst detail appears and spins
Facebook Animation
04:23
+
Masking & Gradients
3 Lectures 20:11

Gradients - In this lesson we look at creating gradients using svg code. We take an svg created in Illustrator then create the gradient in code in CodePen. After creating our gradient we look at how to easily apply it to any other element within our svg.

Gradient Project
05:43

Texture - In this lesson we look at applying a texture to an svg icon or text by using a mask and any black/white image.

Using Texture's
04:26

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.

Advanced Masking Technique
10:02
+
Course Close
1 Lecture 00:30

Congratulations for completing this course on svg animation. We hop to see you in a future course. Please remember to rate the course if you found it useful. Thank You.

Congratulations & Thank You
00:30
About the Instructor
Code Collective
4.3 Average rating
1,147 Reviews
19,560 Students
2 Courses
Level up your coding.

Get ahead in the developer world. Learn new skills that will help take your career to the nest level. 

Over 1000 positive reviews and 20k students enjoy my courses. 

If you need a specific course please contact us and we can create courses on anything related to coding.