Better animation performance + Flash dies for real this time Â -Â The UI Animation Newsletter vol 15.14

Performance tips, Adobe ends Flash, plus inspiration, resources & links

Let's talk about animation and performance!

The translate 3D â€œhackâ€, backface-visibility:hidden, and the will-change property are the heavy hitters of animation performance. But decisions made even earlier in your design process can have a big impact on performance too. If you keep these three things in mind while you're designing your animations you'll already be ahead of the game!

Match the tech to your needs
Loading in the full weight of a robust JavaScript animation library is going to be overkill if youâ€™re only animating a few small elements here and there. That extra overhead will definitely have an impact on performance. Performance budgets will not be pleased.

Aim to match the complexity of the technology you choose to the complexity of your animation needs to avoid unnecessary performance strain. For small amounts of animation, stick to CSS. As your animations grow in complexity, or start to require more robust logic, move to a JavaScript solution that can accomplish what you need.

Animate the most performant properties
The most efficient properties to animate are: opacity, scale, rotation, and position (when the latter three are done with transforms). Conveniently those are also the most common properties used in motion design. (Yay!) Stick to these properties to set your animations up for the best performance results from the start. (csstriggers.com will tell you how much impact other properties might have.)

Offset animation start times
Offsets (the concept of having a series of similar movements execute one slightly after the other, creating a wave-like pattern) are a motion graphics trick for creating more interesting and organic looking motion.

Employing this trick of the trade can also be smart for performance. Animating a large number of objects all at the same time can put a strain on the browserâ€™s rendering abilities even in the best cases. Adding short delays to offset these animations in time can positively impact rendering performance.

For more on animation and performance, check out my interview on Path to Perf and this screencast from Harry Robertâ€™s on how to fix performance issues with the will-change property. Itâ€™s really great!

- Val

Forward

UI Animation of the week

I love this switch! Itâ€™s clever and functional and packs a lot of personality into a small space. The motion hints nicely at a tactile toggle switch feel too. It was made in pure CSS fun by Benjamin RÃ©thorÃ© based on this Dribbble shot.

Animating box shadows

Animating box shadows usually means taking a big performance hit, but not if you use pseudo-elements! This is a clever trick to have up your sleeve from fellow UI Animation Newsletter reader Tobias Ahlin.

Inspiration: Einstein 100

This piece by Eion Duffy is quirky, cute and informative all at the same time. The motion is well executed and done in a style that matches the tone of the illustrations perfectly. It's great motion design inspiration!

News

This week Adobe announced that Flash Professional will soon be no more. As of next year, it will be known as Adobe Animate CC and it will â€œoutput animations to virtually any format (including SVG), through its extensible architecture.â€ Isnâ€™t that interesting!

Adobe also announced that Edge Animate is no longer being actively developed. The assumption is that Edge Animateâ€™s features will be rolled into the new Animate CC. Looks like Adobe is ready to properly invest in making web animation tools!

Learning

Cage Match! animated SVG vs animated gif #svg #tools
Sara Soueidan tells you how it is and how animated gifs stack up against animated SVG. This article goes way in-depth and has details about SVG you probably didn't know before.

Beyond Boxes: Creative Coding with JS #talk #video
Rachel Smith shares some great tips on how to get started with creative coding and how to break out of the humdrum of overly common design patterns by using some motion.

Beginners guide to motion design on the web #tutorial #webanimation
If you missed it in print in Net Magazine, my primer on motion design for web animation is now online. I cover how to apply classic animation principles to improve interface animation on the web.

Inspiration

Interactive SVG with sound #experiment #svg
Trigger sound and animation by pressing keys in this very lovely and very fun experiment from Sara Drasner. Even makes popping balloons make fun sounds in this demo.

Geocities animation is cool again? #dzy #webanimation #wtf?
Um, what on earth? Has bad animation come around to being good already? Love it or hate it, you have to admit Bloomberg is nailing their new design direction. (I hesitate to call it inspiration exactly, but it certainly makes an impression!)

See music in abstract animation #dzy #experience
This fun site offers a synesthesia-like experience conducting the Paris Orchestra with abstract animation. Itâ€™s easy to get lost in generated loops and swirls as you conduct the music with your mouse.

Tools

Mo.js #library #javascript #motiondesign
Mo.js is the new animation library on the web animation scene. If you've hearted any of LegoMushroom's pens on Codepen, you've already seen it in action. I really like what I've seen of mo.js so far! They've started off their tutorials section with a wonderful easing tutorial as well.

Expanded SVG path builder #svg
It started as a codepen demo a few issues back and it's been expanded to an even more awesomely functional SVG path builder tool. If you need to draw SVG paths or just learn more about how they work, this is the tool for you!

Gif Loop Coder #javascript #fun
We all need to have a little code fun once in a while, right? Turn abstract JavaScript animations into shareable gifs with this wacky tool from Keith Peters. And while you're at it, join the 25 days of gifmas to get into the holiday spirit!