Animation guides
Short, practical guides to the ideas behind 2D animation, from the classic principles to animating buttons on a web page. Read them in order or jump to the one you need.
The 12 Principles of Animation, Explained SimplySquash and stretch, anticipation, timing, arcs and the rest of the 12 principles of animation, each explained in plain words with a small exercise to try.
Keyframes and In-Betweens: How Animation Is PlannedWhat keys, extremes, breakdowns and in-betweens are, how timing charts and onion skinning help, and how software tweening relates to the hand-drawn method.
Easing Explained: Ease-In, Ease-Out, Bezier, Bounce and ElasticHow easing curves change the speed of animation, what ease-in and ease-out mean, how cubic-bezier handles work, and when to use bounce or elastic easing.
Frame Rates and Timing in Animation: 24 fps, Twos and BeyondWhat 24, 25, 30 and 60 fps mean for animation, animating on ones, twos and threes, how to count frames for an action, and timing tips for web motion.
Free 2D Animation Software: The Main Types and Who They SuitThe main kinds of free 2D animation software, from frame-by-frame drawing tools to vector, cut-out and browser apps, and how to choose one for your first project.
Animating for the Web with CSS: Transitions and @keyframesA beginner's guide to CSS animation: transitions versus @keyframes, animation properties, easing functions, smooth performance and reduced-motion settings.