There are many ways how you can learn new coding techniques, but the one I prefer is to look at a code, break it, fix it, tweak it and all that right in the browser.
Following the right people on CodePen and exploring their demos can teach you a lot.
1. Sarah Drasner
Also check out her recent post on Smashing Magazine – A Few Different Ways To Use SVG Sprites In Animation, where she explains a few techniques for using SVG sprites in a complex animation.
Responsive SVG Sprite Animation
See the Pen Responsive SVG Sprite Animation that Adjusts Based on Viewport by Sarah Drasner (@sdras) on CodePen.0
2. Chris Gannon
Chris is a UK based interaction designer and you should follow him to learn more about GreenSock and SVG animations.
Diving SVG Animation
SVG Drip Bounce
3. Dennis Gaebel
SVG Low PolyLion: Animated Polygons
4. Rachel Smith
Rachel is an Aussie living in the US. Explore her demos to learn more about CSS animations, SVG, Velocity.js, GreenSock and Snap.svg.
Circles, text and getImageData
Did I forget anyone worth mentioning? Who are your favorite developers on CodePen? Let me know in the comments below.
Download Free Toolkit
All you need to know to get started with GreenSock and ScrollMagic, in one single package. Straight into your inbox.