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.
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.
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!™
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!
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:
Situations where you need to ask for permission:
If you feel your use of code examples falls outside fair use or the permission given above, feel free to contact us at email@example.com.
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.
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 firstname.lastname@example.org, 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.
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 email@example.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
Follow us on Twitter: http://twitter.com/oreillymedia
Watch us on YouTube: http://www.youtube.com/oreillymedia
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!