How to Create a Show/Hide Transition with TailwindCSS

Creating smooth transitions for your mobile menu can enhance the user experience of your app. In this guide, we'll build a mobile menu with a show/hide transition using React and TailwindCSS, while also optionally integrating Framer Motion for advanced animations.

What You'll Learn:

Setting up a mobile menu component.
Implementing show/hide logic with React's useState.
Adding animations using TailwindCSS or Framer Motion.

Setting Up the Mobile Menu

We'll create two components: Navbar (for the navigation bar) and MobileMenu (for the mobile menu).

`MobileMenu` Component

import { ImHome } from 'react-icons/im'
import { CgProfile } from 'react-icons/cg'
import { HiUsers } from 'react-icons/hi'

function MobileMenu({ isVisible }) {
  return (
    <div
      className={`$ {
        isVisible ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-full"
      } block w-full border-t border-slate-700 border-opacity-70 bg-gray-800 px-4 py-3 text-white transition-all duration-300 ease-in-out md:hidden`}
    >
      <div className="mb-3 flex items-center border-b border-slate-700 pb-3">
        <img
          src="https://placehold.co/32x32"
          className="h-8 w-8 cursor-pointer rounded-full"
          alt="Profile"
        />
        <h6 className="ml-5 cursor-pointer">Elon Musk</h6>
      </div>
      <div className="flex items-center">
        <ImHome size={20} />
        <h4 className="ml-5">Home</h4>
      </div>
      <div className="flex items-center">
        <HiUsers size={20} />
        <h4 className="ml-5">Friends</h4>
      </div>
      <div className="flex items-center">
        <CgProfile size={20} />
        <h4 className="ml-5">My Profile</h4>
      </div>
    </div>
  )
}

export default MobileMenu

`Navbar` Component

import React, { useState } from 'react'
import { FiMenu } from 'react-icons/fi'
import MobileMenu from './MobileMenu'

function Navbar() {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)

  return (
    <>
      <nav className="flex items-center justify-between bg-gray-900 px-4 py-3 text-white lg:px-8">
        <div
          className="block cursor-pointer rounded-full p-2 hover:bg-gray-700 md:hidden"
          onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
        >
          <FiMenu size={20} />
        </div>
      </nav>

      {/* Mobile Menu */}
      <MobileMenu isVisible={mobileMenuOpen} />
    </>
  )
}

export default Navbar

Adding Animations with TailwindCSS

To animate the show/hide transition, use TailwindCSS's utility classes:

transition-all: Animates changes in multiple properties.
duration-300: Sets the animation duration to 300ms.
ease-in-out: Provides a smooth easing curve.

Here’s how the classes are applied in the MobileMenu component:

<div
  className={`$ {
    isVisible ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-full"
  } transition-all duration-300 ease-in-out ...`}
>

This approach ensures smooth transitions for both opacity and position when toggling the menu.

Advanced Animations with Framer Motion (Optional)

For more advanced control, integrate Framer Motion:

Installing Framer Motion

npm install framer-motion

Updated `MobileMenu` Component

import { motion } from 'framer-motion'

function MobileMenu({ isVisible }) {
  return (
    <motion.div
      initial={{ opacity: 0, y: -100 }}
      animate={{ opacity: isVisible ? 1 : 0, y: isVisible ? 0 : -100 }}
      transition={{ duration: 0.3 }}
      className="block w-full border-t border-slate-700 border-opacity-70 bg-gray-800 px-4 py-3 text-white md:hidden"
    >
      {/* Menu Content */}
    </motion.div>
  )
}

export default MobileMenu

Benefits of Framer Motion

Easily customize animations.
Fine-grained control over properties like duration and easing.
Chain animations for complex effects.

FAQs

How do I toggle the mobile menu?

Use React's useState hook to manage the menu's visibility state. For example:

const [mobileMenuOpen, setMobileMenuOpen] = useState(false)

Can I use TailwindCSS without Framer Motion?

Yes! TailwindCSS provides robust utilities for smooth transitions. Framer Motion is optional and only needed for more advanced animations.

Why is my animation not working?

Ensure you:

Add the necessary TailwindCSS classes (e.g., transition, duration, ease-in-out).
Use a parent container to manage the state and pass it as a prop to the MobileMenu component.