Animations are a neat way to give a finishing touch to your web app. As developers, we often keep animations towards the end of the implementation and focus on the functional spec. A key reason for this is the feeling of complexity that comes with animations. But in reality, most animations are not more than a couple of code lines away. And once added, animations dramatically improve the UX of the overall web app, making it more intuitive and appealing. Thus, it's beneficial to know implementation techniques for at least the basic animations. In this guide, we'll explore animations using a simple tab pane example. We often get to use tabbed navigation in our views. In the jQuery days, our tabs would have worked perfectly when the necessary libraries were imported. But with React, we need to add a bit more work to make the UX intuitive and appealing to the user. To keep things simple, we will be using the tabs component from Bootstrap. Please note that we won't be using React-Bootstrap, which has React component implementations for each Bootstrap component, but rather the plain Bootstrap CSS styling. First, create an app, and add Bootstrap with `npm install --save bootstrap`. Then we'll add the following tabbed component. ```jsx // App.js import React, { useState } from 'react'; import logo from './logo.svg'; import './App.css'; import 'bootstrap/dist/css/bootstrap.min.css'; function TabComponent() { const [currentTab, setCurrentTab] = useState(1); return (

{currentTab === 1 &&

Tab 01

Some content

} {currentTab === 2 &&

Tab 02

Some content

} {currentTab === 3 &&

Tab 03

Some content

}

) } function App() { return (

); } export default App; ``` When you run the app, you can see that although the tabs work, they does not have the feel of a native tab component. Ideally, when a tab is clicked, the content should *slide in* depending on the direction of the tab, rather than abruptly disappearing and appearing, as is happening here.

A reliable resource for just-in-time answers