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.
