Countdown to The New Year - Ember Animated

This is the seventh in our DecEmber series–"Countdown to The New Year: 31 Days of Ember Addons". We plan to highlight a new addon each day until the new year, and we hope you'll join us for the fun!

Day 7

According to Wikipedia's History of Animation-

The Roman poet and philosopher Lucretius (c. 99 BCE – c. 55 BCE) wrote in his poem De rerum natura a few lines that come close to the basic principles of animation: "…when the first image perishes and a second is then produced in another position, the former seems to have altered its pose. Of course this must be supposed to take place very swiftly: so great is their velocity, so great the store of particles in any single moment of sensation, to enable the supply to come up."

Today, we write such poems in code, using ember-animated.

What It Does

ember install ember-animated is an invitation for creativity. This addon provides animation primitives and some built-in transitions that help bring interfaces to life! You can animate across route changes, content can flow smoothly when new data arrives, and web interactions can compete with the kinds of interfaces that are usually only seen in native applications.

Why I Like It

I feel like animation helps an app make the leap from beautiful and useful to delightful.

My favorite thing about it is that I do not need to wrap my animation targets in any other elements. This has major benefits for styling and writing semantic, valid HTML. The out-of-the-box motions are helpful, and I also appreciate that I can write my own animations to fit unusual use cases.

This addon is Octane ready, although its documentation needs some Octane code examples added in. Check out the Issues to help out!

Do you use this addon? Or one like it? We'd love to hear about Ember addons that bring you joy!