Learn SVG Animation - With HTML, CSS & Javascript

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.

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.

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.

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

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.

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.

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.

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

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

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.

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.

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.

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.

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

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

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

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.

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.

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.

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.