Mastering SVG Animation

For the past couple of weeks I've been lucky enough to take part in Cassie Evans' latest SVG workshop (the first truly exceptional perk of the "new" career 🤩). The workshop was split into five parts, taking place on the 2nd, 3rd, 9th, 10th, and 16th, with each session running about 2½ hours long (though Cassie was extremely generous with their time, routinely sticking around to chat and answer questions for another half hour or more). Our focus was on SVG animation (obviously 😄), which covered both native CSS animation methods and a full introduction to the Greensock library (GSAP), both of which were really interesting to learn about. We also spent a good amount of time looking at and better understanding SVG as a language in its own right, which was monumentally helpful and pointed out several glaring gaps in my existing understanding.

I've been keeping relatively scattergun notes throughout the course, but imagine I'll keep these private for now. What I will say is that anyone interested in animation on the web will learn a lot from this workshop, and I'd thoroughly recommend it. You don't need particularly strong technical skills, though a working understanding of HTML/CSS and the DOM is probably a requirement; JavaScript less so, though it will certainly make the GSAP sections a bit easier if you have a grounding in the fundamentals of vanilla JS.

Cassie is a brilliant teacher and the course is structured really nicely. As I had hoped, we covered every aspect of animation, including performance, auditing, and accessibility, so you'll come away with a holistic set of skills and knowledge that can be immediately applied to commercial projects without any additional worries. Plus, as part of the ticket cost, you get access to an SVG/animation focused Slack community that Cassie moderates, full recordings of each session to return to when needed, and a login code to a documentation site running over all of the key points and lessons, including live forkable examples, linked useful resources, and further reading lists. I probably didn't need to keep so many notes, but there we go 😅

On the note of examples, being a workshop meant hands-on coding took up a decent chunk of each session. Most of this was done via CodePen, which made setup incredibly easy and allowed me to jump between my work laptop and home desktop without worrying about syncing dev environments or dependencies or anything annoying like that. It also means that everyone involved could easily share their work to ask for help or feedback, or just to show off their creations, which was really useful for generating ideas or being able to sanity check code.

Cassie had example Pens ready to go, with premade assets optimised for whatever animation technique we were currently working on, but we were also encouraged to use our own SVGs and set our own goals as we went. I tended to do a bit of both, so never really got my personal project to a point I was happy with; no complaints there though, as I generally enjoyed firing up Illustrator again and digging in, plus what I do have now (even if not "done" yet) is a million times more complete than it would have been 😁

All of which is to say that I can't recommend the course enough. Cassie's enthusiasm is infectious and I was pleasantly surprised that – despite the breadth/depth of information that we covered – I feel like a lot of it has actually sunk in and may actually stick around (🤞). I should also add that, despite having several years of experience working with SVGs, CSS animations, and Illustrator, I still had plenty of lightbulb moments of clarity, and getting to grips with GSAP (at long last) will hopefully be extremely useful moving forward. A fantastic workshop and exceptional learning experience all around – I can't thank Cassie and the pland. organisers[1] enough for the opportunity!

Explore Other Journal Entries

Older

Go Fest 2021

Following on from the success of last year's pandemic event (and the follow-up at Christmas) it looks like Go Fest will likely be an […]

Footnotes

Conversation

Want to take part?

Comments are powered by Webmentions; if you know what that means, do your thing 👍

  • For the past couple of weeks I've been lucky enough to take part in Cassie Evans' latest SVG workshop (the first truly exceptional perk of the […]
  • HTML & CSS
  • Animation
  • Murray Adcock.
Journal permalink

Made By Me, But Made Possible By:

CMS:

Build: Gatsby

Deployment: GitHub

Hosting: Netlify

Connect With Me:

Twitter Twitter

Instagram Instragram

500px 500px

GitHub GitHub

Keep Up To Date:

All Posts RSS feed.

Articles RSS feed.

Journal RSS feed.

Notes RSS feed.