Animate a Better Experience with Tab Navigation and React-spring.

Your audience will love you if you give them a loving UX-in-Code experience.

Michael Lisboa
Jan 18 · 8 min read
Image for post
Image for post
Tabs are great UX, but they shouldn’t get in the way of your content.

“How do we communicate our big creative message and convert sales, on tiny little phone screens — in less than 2 seconds?”

The lamenting cries of marketers everywhere.

Image for post
Image for post
This is what we’re going to make. Simple, right?

On mobile devices, your website should feel like a native app.

Let’s start coding.

First, let’s install a couple things.

A little side note…

The “Tabs” component.

["Sign Up", "Pricing", "Contact Us"]
${tabsExpanded ? "tabs-default" : "tabs-collapsed"}

We want our Tabs component to be importable everywhere!

Setting up touch gestures.

onDrag: ({ down, direction: [, y], delta: [yDelta] }) => {
const trigger = Math.abs(yDelta) >= 1;
const dir = y > 0 ? -1 : 1;
if (!down && trigger) dir < 0 ? setTabsExpanded(true) : setTabsExpanded(false);

Let’s get animated.

Attach our animation functions to the tabs.

Image for post
Image for post
An animated Tab component that can be reused anywhere.

Here’s all the code.

The CSS to make it work

Image for post
Image for post
Swipey goodness!

That’s all good, but what about larger devices and desktop browsers?

Image for post
Image for post
Delivering the expected, and intuitive, scrolling experience for desktop.

How to use it in your app

Closing out, thank you,

Also, get the code on GitHub.

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Michael Lisboa

Written by

Hi, I’m Michael. Brand strategist, Creative Director, UX specialist, Startup founder, TechnoCreativeologist, and a really good guy. https://www.hypermix.com

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Michael Lisboa

Written by

Hi, I’m Michael. Brand strategist, Creative Director, UX specialist, Startup founder, TechnoCreativeologist, and a really good guy. https://www.hypermix.com

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface.

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox.

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic.

Get the Medium app