CategoryAnimation

November 18, 2014 — In the wake of so much “CSS versus JavaScript animation” infighting, a new API specifically for web animation is coming out that might just unite both camps. In 2014, Rachel Nabors had the chance to travel the world to talk about using animation in user interfaces and design. She met and interviewed dozens of people who use and champion both CSS and JavaScript. What you’re about to read is purely observational and as unbiased an account as you will be able to find on the subject of web animation. Read more…

March 5, 2013 — Everyone likes stuff that moves about on the Web, right? Remember how you cried joyful tears when you first used <marquee>? I do. I nearly sobbed all the water out of my body as I gazed upon “JAKE’S COOL WEBSITE” bobbing back and forth in uppercase serif. Of course, we’re more mature as an industry these days. Read more…

October 30, 2012 — Transitions and subtle motion-based animations are emerging as a new and compelling mobile design material, worthy of being learned and being used with efficiency and grace. Rachel Hinman shares the 12 basic principles of animation. Read more…

April 25, 2012 — Thanks to CSS3, we can create effects and animations without using JavaScript, which will facilitate the work of many designers. Read more…

October 4, 2011 — Christian Heilmann brings us a quick introduction to using exponentials and sine waves and to plotting things on a circle. Have a go with the code, and play with the numbers! Read more…

September 23, 2011 — There are pros and cons to the wide range of resources available to us, but this tutorial will not explore them all. Instead, we’ll create our graph using a progressively enhanced sprinkling of CSS3 and jQuery. Read more…

September 14, 2011 — In this article, we will take our first steps with CSS animation and consider the main guidelines for creating animation with CSS. We’ll be working through an example, building up the animation using the principles of traditional animation. Finally, we’ll see some real-world usages. Read more…

May 17, 2011 — In this article, Louis Lazaris covers all the important parts of the syntax for CSS animations. If you haven’t yet started using CSS keyframe animations, here’s your chance to start! Read more…

February 3, 2011 — Adding interactivity and animations to a design doesn’t have to be complicated or make the website inaccessible when you use modern Web standards. In this article, we’ll explore several examples and theories that employ CSS, HTML, SVG, the canvas element and JavaScript. Some of these techniques you’ll know, others you may not have considered. Let’s start with the basics. “Bringing Interactivity To Your Website With Web Standards”)](https://www.smashingmagazine.com/?p=85432) Manipulating HTML with JavaScript is the most common method of adding interactivity to a website. But before you start using JavaScript, having a strong understanding of the CSS visual formatting model and box model is important. They are vital to making sense of how HTML elements can be manipulated visually. When you dynamically change the style of an HTML element, it will flow with and react to the rest of the document. Learning to anticipate and control what is affected can be difficult. Read more…

March 3, 2008 — Animated short movies are excellent for tedious coffee breaks and uninspiring monday mornings. To put some beautiful story in a short 2-5 minutes sequence isn’t easy, but even in this case designers and artists are quite creative and manage to come up with very surprising and unusual results. The selection below is supposed to make you cry, laugh, feel bizarre or even shocked — in every case being absolutely smashed. Read more…