I recently gave a talk titled Breaking Down SVG Animations at a local meet-up in Singapore called Talk.CSS. It is not so much about SVG and it is more about how to approach complex animations for the web as a beginner. In this talk, I refer to complex animation as animating cartoons or characters; anything other than your standard UI animation. For example, how do you animate a sheep eating grass? These things require quite a bit of imagination:

You can always watch my talk on YouTube and look at the slides here but for the ones who prefer reading instead of watching, here’s a write-up!

The Foundation of Complex Animation

Working with complex animation requires you to have a strong understanding of the fundamentals of web animations. If you’ve work with UI animation before, you have a solid foundation already since you’re familiar with basic transform properties like rotate, scale, translate, skew, etc.

Complex animation is a combination of these transform properties. For example, this smoke animation is a combination of translate, scale, and opacity properties.

I got the inspiration for this by reading a tutorial from David Walsh’s blog. This Kings Landing SVG animation demo gave me an idea on how to animate smokes.

If you look at the Javascript code, it is even more clear how the animation is created. Using GSAP’s timeline.fromTo, I manipulate the smoke elements’ x, y, opacity, and scale transform properties from an initial value to another in order to move the chimney smoke up, expand it, and fade it out.

By understanding the fundamentals well enough, you can think about a particular animation by linking it with its transform properties.

Prototyping Complex Animations

For some of us who can’t visualize the animation using our imagination, this is where prototyping will come in handy. There are animations that will be hard for you to imagine how it will look like especially when you wanna animate complicated subjects like complex movements and interactions. Moving the limbs of an animal comes to mind as a complex subject since it can look awkward and unrealistic if it is not done correctly.

Failing to visualize how you want your animation to behave will make it harder for you to translate it into code. Fortunately, there is a hack for us who are lacking in the creative imagination department.

I used illustrator in order to visualize how the animation would look like. Take the sheep eating grass animation from the above as an example. I draw the limbs that I want to animate separately so that it is easier to translate it into code later on.

The sheep illustration is separated into two groups: head and body. With the separated groups, I can easily move it around and I can visualize how the animation is going to be like. In the video, I move the head downwards a little bit and rotate it.

By having a good visualization of the animation, I can now translate it into code: I know that I need to translate the head of the sheep downwards a few pixels and rotate the head anti-clockwise a few pixels. Using GSAP, here is the end result:

Beyond Transform Properties

Knowing your transform properties is just one part of the foundation. In order to work with complex animation more effectively, other properties such as speed and easings come into play as well. You can creatively combine these properties to achieve the desired effect for a particularly difficult animation.

For example, I combine speed and transform properties in order to animate this geyser:

The geyser, projectiles, and smokes are separated group elements. In order to give the geyser a vibrating effect, I translate it up and down for 2px/-2px and set the speed of the animation as 0.05.

Final Thoughts

Working with complex animation can be very intimidating for some of us who do not have any creative or artistic background. However, approaching complex animation by understanding its fundamentals will make it less intimidating to work with.

The examples that I have given above is meant for you to see complex animation in its most basic angles. By exposing these techniques, I hope all of you would-be web animation artists will not be so intimidated by complex animation anymore and will build up on these techniques in order to create something fun and pretty to look at.

Go forth and spread the ❤ through animations!