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.
What you'll learn
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.
Table of contents
- Setting up Our Animation Project 11m
- Making SVGs Ready for CSS 10m
- Introducing Sass for Better CSS Writing 10m
- Setting up the Scene and Importing Our Graphics into HTML 9m
- Building the Scene by Placing and Scaling the SVGs 10m
- Animating Our Background 10m
- Animating the Submarine 11m
- Making a School of Fish 8m
- Interacting with the Fish 10m
- Turning Our Animation into a Touch-based Game 12m
- Dealing with Partial and Nonexistent Browser Support 10m
About the author
Rembrand Le Compte is a moustached front-end developer and cartoonist-illustrator who likes a good cup of tea. From building WordPress sites, to Bootstrap wireframes, to webshops and JavaScript applications, the past eight years have been busy. Recently, he's been looking for ways to use illustration and animation to build a better web.