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

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.

You've successfully subscribed to Chris Dermody
Great! Next, complete checkout to get full access to all premium content.
Error! Could not sign up. invalid link.
Welcome back! You've successfully signed in.
Error! Could not sign in. Please try again.
Success! Your account is fully activated, you now have access to all content.
Error! Stripe checkout failed.
Success! Your billing info is updated.
Error! Billing info update failed.