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 AssemblyAI tool

Challenge Submission: SpeechCraft - AI-Powered Speech Analysis for Better Communication

SpeechCraft is an advanced real-time speech analytics platform that transforms spoken words into actionable insights. Using cutting-edge AI technology from AssemblyAI, it provides instant transcription while analyzing multiple dimensions of speech performance.

Read full post

Top comments (1)

Collapse
 
devtostd profile image
Dev Studio

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay