I'm making a CSS animation course for loading icons and I need your help...

Chris Dermody -

It's been a weird path, I originally just wanted a cool loading icon for my side project mydevportfol.io, but building loading icons has now evolved into a bit of an addiction for me, and I've gotten quite a few requests for tutorials. I've written tutorial posts before (like here, and here), but they take a LOT of time and effort, so instead of a tutorial post for each loading icon, I think a video course is in order so that I can show you how to build your own loading icons.

I'm going to need examples of icons/logos to animate (I've been struggling to come up with fictional brands), so if you'd like me to animate yours and include it in the course (yay free marketing), drop a comment below or tweet me on Twitter @cderm. If you don't have an icon yet, that's even better, I can take a look at your product/service and suggest one that makes sense.

This is going to be my first video course, and I want to get it right, so I'm looking for your feedback on what topics you'd like to see in it. So far I have:

  • Why SVG?
  • Benefits of SVG animation over CSS animation
  • Tools needed
  • Creating the icon in Sketch
  • Adding SVG to a website
  • CSS rules to use for various types of animations
  • Keyframes explained
  • Animating along a spline
  • JS Libraries to use (morphing shapes)
  • 60FPS performance
  • Converting to GIF
  • Converting to boot animation for phone/computer
  • Where to find inspiration

That's what I have so far. Have I missed anything obvious? Please let me know!

I'm aiming for a mid-July launch. This is my only focus for the moment, my other side projects are on pause right now, I really want to get this course done and out into the world.

If you'd like to stay in the loop and get a discount when it launches, subscribe below. I promise no spam, I hate spam.