Making a Responsive and Interactive Animation with SVGs in CSS

In this tutorial, we'll learn how to build fun animations for the browser that are responsive as well as interactive. Software required: Adobe Illustrator CS6, Chrome, Sass 3.3, jQuery 1.x, Modernizr 2.x.
Course info
Level
Advanced
Updated
Mar 10, 2015
Duration
1h 51m
Table of contents
Description
Course info
Level
Advanced
Updated
Mar 10, 2015
Duration
1h 51m
Description

In this tutorial, we'll learn how to build fun animations for the browser that are responsive as well as interactive. We'll go over how to turn a vector-based design into web-optimized SVGs and make writing keyframe animations easier and more interesting using Sass. By the end you'll have greater understanding of how CSS animations can work together to form an interesting whole. These skills and insights should, in turn, go a long way to make more dynamic web projects that can tell a story or catch the user's attention. Software required: Adobe Illustrator CS6, Chrome, Sass 3.3, jQuery 1.x, Modernizr 2.x.

About the author
About the author

Rembrand Le Compte is a moustached front-end developer and cartoonist-illustrator who likes a good cup of tea.

Section Introduction Transcripts
Section Introduction Transcripts

Introduction and Project Overview
I'm a front-end developer and freelance illustrator/cartoonist working on projects for a wide range of clients from big web applications to webshops for small, independent businesses and the occasional WordPress blog. In this course we will learn how to make fun animations that are responsive as well as interactive, using CSS and SVG. Some of the key takeaways from watching this course include learning how to optimize SVG through animation in the browser, write keyframe animations, use SASS to optimize CSS, make an SVG project responsive, and introduce interactivity to turn your animation into a game. By the end of the training, you will be able to make your own SVG animations in CSS and have some new techniques to make interesting new projects. I'm excited to work with Digital-Tutors and share these techniques with you. So let's get started with the first lesson.