Animation on the web has the potential to revolutionize our small bright box. We can go even further than traditional animation because we can accept user feedback and input. With these tools we can throw away the soul-destroying, bleak, dark engagements that govern things like airline ticket purchases. We can bake animation into the core of our user experience process to create dazzling, exciting, and engaging work that pushes boundaries and collectively elevates the medium of the web. We can help people by unfolding scenes like a choose-your-own-adventure that can feel fluid, interesting, and intuitive!
Read more…
When it comes to providing pleasure or delight in our websites and apps, animations contribute a lot. But always remember that they must be functional first. In this article, Amit Daliot shows us video examples that show functional animation. The following rules map well to every animation Amit encountered so far. They helped him to assess animations that he saw in interfaces, and they are a strong set of guiding principles in deciding how to add animations to a wireframe design.
Read more…
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…
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…
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…
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…
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…
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…
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…
