DEV Community

Cover image for Animated Select component using typescript, shadcn and framer-motion
Bro Karim
Bro Karim

Posted on

1 1 1 1 1

Animated Select component using typescript, shadcn and framer-motion

The "Expand Select Animation" is a custom select component built using TypeScript and Framer Motion, with the base component provided by ShadCN. This component enhances the standard select element with a smooth, visually appealing animation that expands downward to reveal options and collapses upward to hide them.

Demo

Source Code

expand-select.tsx

import { Globe } from "lucide-react";
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { motion, AnimatePresence } from "framer-motion";

export function ExapandSelect() {
  return (
    <Select>
      <SelectTrigger className="text-white w-[180px]flex gap-2 bg-[#1a1a1a] hover:bg-[#3e3d3d] ring-none border-none ">
        <Globe />
        <SelectValue placeholder="English" />
      </SelectTrigger>
      <AnimatePresence>
        <SelectContent className="bg-[#3e3d3d] text-white  border-none p-[1px]">
          <motion.div
            initial={{ opacity: 0, height: 0, scale: 0.95 }}
            animate={{
              opacity: 1,
              height: "auto",
              scale: 1,
              transition: {
                type: "spring",
                stiffness: 300,
                damping: 30,
              },
            }}
            exit={{
              opacity: 0,
              height: 0,
              scale: 0.95,
              transition: {
                duration: 0.2,
              },
            }}
            style={{ transformOrigin: "center" }}
          >
            <SelectGroup>
              <SelectItem className=" focus:bg-[#1a1a1a] focus:text-white" value="eng">
                English
              </SelectItem>
              <SelectItem className=" focus:bg-[#1a1a1a] focus:text-white" value="france">
                Français
              </SelectItem>
              <SelectItem className=" focus:bg-[#1a1a1a] focus:text-white" value="spain">
                Español
              </SelectItem>
              <SelectItem className=" focus:bg-[#1a1a1a] focus:text-white" value="deutsch">
                Deutsch
              </SelectItem>
              <SelectItem className=" focus:bg-[#1a1a1a] focus:text-white" value="china">
                中国
              </SelectItem>
            </SelectGroup>
          </motion.div>
        </SelectContent>
      </AnimatePresence>
    </Select>
  );
}

Enter fullscreen mode Exit fullscreen mode

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (1)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up