A guide to transition animations 🔄

Welcome back. One thing that’s been on my mind this week? Community. The designers and devs I’ve met over the years have shaped me. But here’s the deal: Too many people just slap the label “community” on random Discord servers or Circle groups—and fail to build genuine connection. My advice? Seek highly curated or in-person groups and get to know your connections as people, not just designers.

—Tommy (@DesignerTom)

The Wireframe:

• How to design impactful transition animations
• Can you teach yourself animation in 100 days?
• Three animations to add to your toolkit

4 Principles for Better Transition Animations

You know those apps that are so seamless they make you go, “Holy sh*t, that’s true craftsmanship?”

Some call it “the special sauce.” Some call it brilliance.

Me? I prefer Brad Wood’s term: Juice, “the non-essential video, audio, and haptic effects that enhance a user’s experience.”

There are lots of ways you can achieve juice in your designs. Today, we’re exploring one of my favorites: Transition animations.

There’s an art to crafting helpful transition animations that don’t steal the show, but keep the “juices” flowing. I’m breaking down a few guiding principles to help you get there. Let’s go →

1. Prioritize speed.

Transitions that are too slow or too fast? Confusing. Disorienting, even. And a quick giveaway of animation amateurs.

Avoid this early pitfall by taking speed seriously. The ideal speed for animation? Apple’s iOS guidelines recommend between 200-400 milliseconds, tailored to your product. Some other schools of thought:

• The Nielson Norman Group recommends transitions be between 100ms to 500ms in most cases.
• According to the "Model Human Processor," people typically take 70-700ms to notice things, averaging 230ms. For repeated animations, like menus, 250ms is ideal: noticeable but quick.

Pro tip: In-page transitions should be faster than page-to-page transitions. Why? Users need that instant feedback. For example, an in-page toggle slider should move faster than a view expansion animation with many elements:

2. Use animation to establish info hierarchy.

Transition animation doesn’t just add "the juice"—it can be a powerful communication tool.

When transitioning multiple elements, as designer Dongkyu Lee explains, rank them by importance to help users understand informational hierarchy.

Dongkyu shares a great example: Loading all screen elements at once feels chaotic. But a cascading transition with careful speed considerations reduces clutter and highlights priority.

Design gut check: Nothing is important if everything seems important—so cut the non-essentials. Here’s a great article on how to use animations sparingly.

3. Consider directionality.

Movement implies direction. Direction provides context.

Take this example from Daylight Computer Co.:

The fluid page flip on this tablet shows direction and adds elegance, mimicking a physical book.

Another great example from Dongkyu’s article:

The screen on the right has vertical navigation, so horizontal scrolling is implied. But the left-hand screen has directionality that suggests up-and-down scrolling.

4. Simulate motion in prototypes with tooling.

Don’t leave it to devs to translate your envisioned transitions.

Today’s tools make it easier than ever for designers to add motion to prototypes pre-dev:

No-code prototyping on Figma or Framer. Figma’s prototyping capabilities have come a long way. One designer even built an entire playable version of Flappy Bird with Figma components and variables.

Or, try some no-code web animation with Framer—like this brilliant CTA nav by concept.

Fully functional animation with Rive. Want to take animation building to the next level? Rive is a must-have in your toolbox.

Unlike Figma, Rive allows you to create working, dev-ready animations—and is uniquely effective in the web environment.

The bottom line: When it comes to transition animations, as Dongkyu Lee explains, “the challenge lies in finding the right balance between subtlety and emphasis.” You can learn all the “right” principles to nail this balance—but at the end of the day? The best learnings come from experience. Take note of animations you see and experiment with your own. Soon, the Juice will come pouring out.

News, Tools, and Resources: Transition animation

• Apple’s presentation on designing fluid interfaces is a must-watch.
• Check out Material Design 3’s knowledge hub on transitions—it's jam-packed with great info.
• the psychology of transition animations could help you make the case for using them
• You'll want to bookmark this list of animation resources.
• Think you could learn animation in 100 days? Here's how one designer did.
• Some great advice to ensure your animations are accessible by all users.

Got a great tool, podcast episode, idea, or something else? Comment below and tell me what’s up.

3 Helpful Transition Animations for Animation Novices

Ready to put your animation skills to the test? Get experimental by adding these three simple transition animations to your next project:

1. Morph. When an object morphs between shapes, objects, or icons. Morph is often found in logo animations.

How to use it: Morph works for loading state changes, like a splash page with a logo morph that takes users to the homepage. Try this Figma plugin to transform one vector into another and export it as an HTML animation.

2. Parallax. A tried and true transition when background images move slower than foreground images.

How to use it: Don’t underestimate the power of a good parallax scroll to create depth on the screen. This site pays homage to The Goonies with a parallax scroll, made on Webflow:

3. Rotating text. This animation type says a lot while saving text space. You’ve likely seen it used in SaaS products.

How to use it: Rotating text is great on a hero section or “about” and “services” pages of a marketing site. Try it yourself on Framer with this fully customizable component:

The UX Tools Job Board

• Join the team at Adobe as a Staff Experience Designer for the GenStudio design team.
• Take your skills to AWS's Studio X team as a UX Researcher in Marketing CX.
• Accenture is looking for a UX Designer to lead design for a US federal government client project.

Hiring for a design role, or know someone who is? Submit it here to hit the inboxes of 75k+ talented designers.

Thanks for reading! What are your favorite ways to add animation to a design? Comment below and let me know!