Reddit Motion Design System

I led the development of Reddit’s UX motion design system as part of the Reddit Product Language (RPL) initiative. My goal was to define a cohesive motion framework that enhanced user interactions across the platform. This involved establishing motion principles that reflected Reddit’s brand values while improving the usability and engagement of the product.

Motion Pillars

Motion increases comprehension

Meaningful motion helps users understand the environment that the software is a part of. At Reddit this can be as simple as reinforcing certain actions like joining a subreddit - that deserves some motion to create a memory. Joining a subreddit has wide-ranging effects on the user’s future interactions with the product as a whole.

Motion conveys a tone

Enhancing a positive outcome like gifting/awarding sets a tone for future interactions with that feature. Warning of a potentially destructive one is a high-impact message that isn’t soon forgotten. Motion can be a huge part of these reinforcements across the app.

Motion enhances perceived speed and effort

The classic example here is the kayak.com results. They have them nearly instantly, but presenting a loader and lazy-loading them in the interface increases conversions instantly. This same notion applies to motion as well. Long drawn out loading animations seem tedious, but short, snappy animations can make interactions feel even faster than they are.

Motion directs the user

A big part of graphic design is hierarchy, but in the digital world hierarchy is tougher to convey and directing a user is even harder. Motion can enhance hierarchy by giving directionality and place meaning.

Timing

We want Reddit to feel fast. Speed is one of the primary ways that users define quality software. We’ve defined some baseline timings for our general UI to adhere to.

In-Out

Ease-in-out is great when something is animating from a direct interaction, like hovering a button or something is coming onto the canvas for just a moment. This can feel snappy.

✅️ Use when translating an existing on-screen element to a different on-screen location.

cubic-bezier(0.65, 0, 0.35, 1)

cubic-bezier(0.87, 0, 0.13, 1)

In

Ease-in is used for bringing something permanent or semi-permanent onto the screen from out of view. This should be a short, non-blocking animation to alert the user to the presence of the new UI.

✅️ Use when introducing a new element entering the screen.

cubic-bezier(0.32, 0, 0.67, 0)

cubic-bezier(0.7, 0, 0.84, 0)

Out

Ease-out is used to remove something from the screen. Ideally it returns to where it came from or to the place it might be “going”. A great example of this is an email app’s send animation going up and away from the user.

✅️ Use when dismissing an element exiting the screen.

cubic-bezier(0.33, 1, 0.68, 1)

cubic-bezier(0.16, 1, 0.3, 1)

Three Types of Motion

General System UI:

80% of the motion will be in this category. This is where we use the good-old iOS/Android system motion. Users are familiar with it. It’s safe. It’s quiet, and it goes unnoticed, like the old saying “good design is invisible.”

Reddity System UI

18% This is where we want to draw attention. Be “visible”. We are going to use the custom “OrangeRed” animation curve here to make Reddit feel unique, and delight our users.

Delightfulness

2% A small portion of our design mimics real life objects: Confetti, Spinning wheels, and floating particles. Many serious platforms don't dare to do the crazy stuff that we do, so our animation will make sure they feel real. Use carefully.