Tabs Gallery

December 12th, 2023

I created a tab bar with a nice microinteraction to change between the tab content. I used Framer Motion to create these microinteractions.

{activeTab === tab.id && (
    <motion.span
      layoutId="bubble"
      className="absolute inset-0 z-10  mix-blend-difference"
      style={{ borderRadius: 9999 }}
      transition={{ type: "spring", bounce: 0.2, duration: 0.6 }}
  />
  )}

You can add some theme logic to change the background color of the selected tab whenever the theme changes by using a ternary operator within the className attribute.

Smooth Change Transitions

To create these smooth change transitions, I used the Layout-Transition functionality from Framer Motion. Here I used a layoutId to achieve the desired outcome:

 
  <TabContent tabId="overview" activeTab={activeTab}>
    <motion.div
      className="flex gap-2 overflow-x-auto mx-auto h-[500px] max-w-[800px] "
      layoutId="images"
      transition={{ type: "spring", bounce: 0.2, duration: 0.6 }}
    >
      {images.map((image) => {
        return (
          <motion.div
            className="shadow-lg"
            key={image.link}
            whileHover={{
              width: "350px",
              transition: { duration: 0.2, easings: "spring" },
            }}
          >
            <Image
              src={image.link}
              width={400}
              height={600}
              onClick={() => clickHandler(image.id)}
              alt="placeholder"
              className="rounded-md h-full object-cover cursor-pointer "
            ></Image>
          </motion.div>
        );
      })}
    </motion.div> 
  </TabContent>

Next Interaction

Web Dynamic Island

back

Smooth Change Transitions

back