Preface

Animations are everywhere. Today, anything you do on a device with a screen is just one click, tap, or keystroke away from springing to life. As it turns out, animations are no longer a luxury or something to keep under wraps. Instead, they make up a large part of your experience using applications in your browser, on your phone, or on any other “smart” device. It’s no surprise why. Users love animations. When done right, animations can make your applications easier to navigate, make your content more presentable, and even help your creations feel more alive and fun. Sometimes, animations look cool and you just gotta throw them in. These are all good things!™

What’s the catch? Well, for all the great things animations have going for them, creating them is hard. On the web, the way you think about animations is different. The way you create them is also different…really different. The challenges that you once painfully overcame in older technologies like Flash are back in new and interesting ways. Fortunately, this is all part of learning something new. All you need is the right guide to help you along the way.

That guide is going to be me:

Hi. My name is Kirupa, and I love animation. Ever since my parents bought me a computer in the early 1990s, I’ve been trying to get things to move on the screen and tell everybody how awesome it is. Nothing much has changed in my world since then…except for this book.

This book is all about teaching you how to create great animations for the web. It starts off with the very basics and gradually ratchets up the heat as you learn how to create more involved, more lifelike, and more complex animations. By the time you reach the last page, you will have learned a lot about how to create animations in HTML, CSS, and JavaScript using the one-two punch of web standards and best practices. If I did my job well, hopefully you had a bunch of fun along the way and laughed out loud a few times. More than likely, you will also have cringed a lot…kind of like you did after reading “one-two punch of web standards and best practices.”

Know Your Basic HTML, CSS, and JavaScript

To get the most out of this book, you should be familiar with the basics of HTML, CSS, and JavaScript. By no means do I expect you to be an expert in any of these languages, but when you see some HTML or CSS or JavaScript, you should be able to understand what is going on with only a little handholding. This is the equivalent of knowing enough of a local language to get around town by reading the street signs.

If this doesn’t describe you, shuffle (or push/click/flick/scroll) through this book and see how you feel after skimming through some of the pages. If most of what you see seems like unintelligible gibberish, then I encourage you to take a detour and learn the basics of working in HTML first. There are a lot of great books and online tutorials out there (hint: especially on https://www.kirupa.com), so you should be up and running very quickly. After that, you will probably have a much better time with this book.

About Authoring Tools

This entire book is written with no expectation that you use a fancy HTML authoring tool. A basic editor that allows you to see HTML, CSS, and JavaScript is all you need. If all you have is a text editor like Notepad, you’ll be fine as well. This book is old school. It’s all about manual labor and having you get your hands dirty when creating animations.

You may be wondering why a book aimed at teaching animation would avoid using animation tools. There are several reasons. The main one is that tools abstract away important details. They often make choices for you that you may not fully understand. When you’re learning something new and complex such as web-based animations, I strongly believe that you need to know every single detail about what you are doing. That can only happen if you are fully involved in every part of what you are creating.

With all that said, once you’ve learned all about animations, their subtleties, and gotchas, take some time and look at the great tools that are out there. Well-designed tools help you to be significantly more productive than you ever will be defining animations by hand, and being productive is yet another good thing!™

Browser Support

Everything you learn in this book is designed to work on what all the cool people call a “modern” browser. That’s just a fancy way of saying that if you are running a semirecent version of Chrome, Internet Explorer 11, Edge, Firefox, or Safari, you should be good to go. Also, before you ask, everything you see here will work beautifully on mobile devices like your iPhones, iPads, and Android-based gizmos!

Using the Code Examples

Supplemental material (code examples, exercises, etc.) is available for download at https://github.com/kirupa/kirupa/tree/master/creating_web_animations.

You will be seeing a fair amount of code in this book. Since I get a lot of questions regarding how you can use this code, the general gist is this: for most “normal” cases, you can do whatever you want with the code without contacting me or O’Reilly. That’s a bit broad, so the following examples should help you out.

Situations where you don’t need to ask for permission:

Using the code from this book in your personal or commercial project
Taking the code, modifying it, and sharing it with others
Answering a question by using example code
Printing out some code snippets and hanging them on your wall as an art installation

Situations where you need to ask for permission:

Publishing a significant amount of this book’s content and code
Selling or distributing a CD-ROM (…or a VHS recording :P) of the examples you see
Incorporating a significant amount of example code from this book into your product’s documentation

If you feel your use of code examples falls outside fair use or the permission given above, feel free to contact us at permissions@oreilly.com.

O’Reilly Safari

Note

Safari (formerly Safari Books Online) is a membership-based training and reference platform for enterprise, government, educators, and individuals.

Members have access to thousands of books, training videos, Learning Paths, interactive tutorials, and curated playlists from over 250 publishers, including O’Reilly Media, Harvard Business Review, Prentice Hall Professional, Addison-Wesley Professional, Microsoft Press, Sams, Que, Peachpit Press, Adobe, Focal Press, Cisco Press, John Wiley & Sons, Syngress, Morgan Kaufmann, IBM Redbooks, Packt, Adobe Press, FT Press, Apress, Manning, New Riders, McGraw-Hill, Jones & Bartlett, and Course Technology, among others.

For more information, please visit http://oreilly.com/safari.

Getting Help/Contacting the Author

The last (and most important) thing to know before we get started is what to do when you get stuck or just need some assistance. The fastest and most effective way for getting help is to post on the forums at http://forum.kirupa.com. I or any of the many other friendly posters will help you out.

For any nontechnical assistance, you can contact me at kirupa@kirupa.com, tweet to @kirupa, or message me on Facebook. I love hearing from readers like you, and I make it a point to personally respond to every message I receive.

Contacting O’Reilly

If you’d like to contact the publisher, then use the following details:

O’Reilly Media, Inc.
1005 Gravenstein Highway North
Sebastopol, CA 95472
800-998-9938 (in the United States or Canada)
707-829-0515 (international or local)
707-829-0104 (fax)

We have a web page for this book, where we list errata, examples, and any additional information. You can access this page at http://bit.ly/creatingWebAnimations.

To comment or ask technical questions about this book, send email to bookquestions@oreilly.com.

For more information about our books, courses, conferences, and news, see our website at http://www.oreilly.com.

Find us on Facebook: http://facebook.com/oreilly

Watch us on YouTube: http://www.youtube.com/oreillymedia

Acknowledgments

Before we move on to the main part of the book, there are bunch of people that I’d like to thank for helping make this book a reality:

First, I’d like to thank Meena—my awesome wife who encouraged me to contact O’Reilly in the first place, helped get the ball rolling for the book you see right now, and patiently tolerated my antics (I am a writer, after all!) during the course of this book’s writing.

Next, I’d like to thank my parents for always encouraging me to aimlessly wander and enjoy free time to do what I liked—such as spending a large amount of time on the computer trying to make pixels move around the screen. I wouldn’t be half the rugged indoorsman/scholar/warrior I am today without them both.

On the publishing side, writing the words you see here is the easy part. Getting the book into your hands is an amazingly complex process. The more I learn about all the moving pieces involved, the more impressed I am at all the individuals who work tirelessly behind the scenes to keep this amazing machinery running. To everyone at O’Reilly who made this possible, thank you! There is one person I would like to explicitly call out: I’d like to thank Meg Foley for replying to my original email asking if I could write a book on web animations, patiently walking me through the publishing process, and working with me throughout to help make the book the best it can be. Next, I would like to thank Rachel Monaghan and Kristen Brown for turning the original draft of this book into a form of English that humans can easily understand. If the content in this book makes sense, a large amount of credit should be given to Rachel and Kristen for helping make that happen!

Lastly, the technical content of this book has been reviewed in great detail by my long-time friend and online collaborator, Trevor McCauley (aka senocular). Words have not been invented (in any language…as far as I know) to express how grateful I am for his attention to detail and ability to highlight when I could explain something in a better, more clear way.

And with that…let’s get started!