Animation

uxdesign.cc

Hassle-Free Animations: Lottie Takes the Grunt Work Out of Animations for Native Apps and the Web

Animation is one of the most powerful tools for product designers. When design elements dance, spin, jump, and move, they instantly create a more delightful experience for the user, and they can…

Read the full story⇀

tympanus.net

Organic SVG Shape Morph Ideas

Today we’d like to share some more animated organic SVG shapes with you. The idea is to integrate some flowy, natural looking shapes into a web page as decorative elements, sometimes with…

Read the full story⇀

youtube.com

Use Keynote to Create a Scroll-Based Parallax Animation

Today I want to show you a trick I use for mocking up websites or mobile app designs using Keynote and Magic Move. Keynote is a great tool for simulating different states…

Read the full story⇀

prolificinteractive.com

The Design Guide to Winning Developers’ Hearts. Part 1: Use Lottie

This series of blog posts are written for the designer who longs to be the favorite amongst the dev team. These articles will help you become the one that all the devs…

Read the full story⇀

framer.com

A Change In Motion – Working With Vector-Based Animations in Framer

I have always advocated for using code as a tool for design exploration. But at the same time, whenever I’m in a team that’s trying to adopt code in their design process,…

Read the full story⇀

prototypr.io

Building Systems In Motion Design

Start discovering how to implement systematic use of motion in your process. What is a design system? Design systems are used to guide application of established conventions that meet the requirements of…

Read the full story⇀

medium.com

Bringing Sketch and After Effects Closer Together

Introducing two new animation workflow tools from UX Motion Design at Google. Introducing Inspector Spacetime and Sketch2AE Good UX motion design isn’t simply animating assets. Whether we’re injecting delight and playfulness, defining…

Read the full story⇀

airbnb.design

The Future of Lottie – Our Community-Driven Vision for the Future of Our Animation Tool

When we released Lottie six months ago, we never imagined it would be embraced by the community as it has been. It is inspiring to hear from people in person, through emails,…

Read the full story⇀

alistapart.com

Integrating Animation into a Design System

Keeping animation choreography cohesive from the outset of a project can be challenging, especially for small companies. Without a dedicated motion specialist on the team, it can be difficult to prioritize guidelines…

Read the full story⇀

algolia.com

Performant Web Animations and Interactions: Achieving 60 FPS

Silky smooth interactions are critical for providing a natural-feeling application. The devil is in the details, and ill-performant web animations feel awkward, “janky”, and, above all, slow. Developers often invest quite a…

Read the full story⇀

thenounproject.com

Icons In Motion

We interviewed Salih Abdul-Karim, Airbnb’s design lead and animator, to learn how he turned Noun Project’s icons into moving animations with a new tool called Lottie. Hi Salih! Thanks for taking time…

Read the full story⇀

Animated Keyboards Using Facebook Keyframes

I’ve always had a passion for animation. It can give users a sense of delight, help communicate a message, and when done right — guide a user smoothly through your product. Before getting into…

Read the full story⇀

prototypr.io

6 Animation Guidelines for UX Design

If you've read my previous article you’ve probably already figured out that I’m quite fond of animation (aka motion design). Besides giving life to a static image, animation can help you tell…

Read the full story⇀

prototypr.io

Motion Design Thinking

This is article is about how we perceive and apply motion design in our digital products. Animation vs. Motion Design When we think of motion design, we think of animation, and when…

Read the full story⇀

css-tricks.com

CSS Animations vs Web Animations API

There is a native API for animation in JavaScript known as the Web Animations API. We'll call it WAAPI in this post. MDN has good documentation on it, and Dan Wilson has…

Read the full story⇀

prototypr.io

A Lottie to Like

Anyone who follows my work knows that I’m a huge fan of using animation and motion design to make digital products more understandable, intuitive and fun. So when AirbnbEng released Lottie I…

Read the full story⇀