Animated Select component using typescript, shadcn and framer-motion

#webdev #javascript #frontend #frontendchallenge

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>
  );
}

Deploy with ease. Manage efficiently. Scale faster.

Leave the infrastructure headaches to us, while you focus on pushing boundaries, realizing your vision, and making a lasting impression on your users.

Get Started