Animated Select Component (React)

Related tags

Learning resource react javascript css typescript react-sping
Overview

Spring Chain

We built a custom select component with a menu with animations and beautiful gradients and a glassy style, is called "Spring Chain" because of how the animation is built, you can select any gradient from the list and the menu is displayed as a grid.

We also made use of the "spring chain" (react-spring library) to make some perfect animations.

app gif

Live Demo

Live

Video Tutorial

Video Tutorial

Built with

  • JavaScript
  • react
  • TypeScript
  • react-spring (animations)
  • css

Author

Cecilia Benitez

Show your support

Give a ⭐️ if you like this project

You might also like...

A JavaScript library to shuffle the text content of a DOM element with an animated effect.

shuffle-letters.js A JavaScript library to shuffle the text content of a DOM element with an animated effect. NOTE: This library is a port to vanilla

Jun 2, 2022

CPUSim is an open-source web-based animated x64 CPU simulator for educational purposes. Provided as a folder for easy distribution and without installation on the Google Chrome Browser. Powered by Unicorn.js, Capstone.js, Quasar and NASM.

CPUSim is an open-source web-based animated x64 CPU simulator for educational purposes. Provided as a folder for easy distribution and without installation on the Google Chrome Browser. Powered by Unicorn.js, Capstone.js, Quasar and NASM.

CPUSim - A Graphical CPU Simulator CPUSim is an open-source web-based animated x64 CPU simulator for educational purposes. Provided as a folder for ea

Oct 26, 2022

This simple project, show how work with async Fetch, function component and class component

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Feb 17, 2022

dynamic-component-app is an angular application for dynamic component template creation

MyApp This project was generated with Angular CLI version 14.1.0. Development server Run ng serve for a dev server. Navigate to http://localhost:4200/

Aug 26, 2022

Bootstrap5-tags - Replace select[multiple] with nices badges

Bootstrap5-tags - Replace select[multiple] with nices badges

Tags for Bootstrap 4/5 How to use An ES6 native replacement for select using standards Bootstrap 5 (and 4) styles. No additional CSS needed! Supports

Jan 9, 2023

Select creates a dropdown list of items with the selected item in closed view.

Select creates a dropdown list of items with the selected item in closed view.

Native Base Select 🔽 This module includes a customizable multi-select and a single select component for Native Base. The package is both Android and

Dec 25, 2022

Annotation tools for the web. Select text, images, or (nearly) anything else, and add your notes.

Annotator Annotator is a JavaScript library for building annotation applications in browsers. It provides a set of interoperable tools for annotating

Dec 23, 2022

A custom select dropdown. This is something that is not too difficult to make.

Custom-Dropdown-JS A custom select dropdown using basic JS fucntionality. This is something that is not too difficult to make. But it shows that you h

Mar 26, 2022

A fast, vanilla JS customisable select box/text input plugin for modern browsers ⚡

choices A fast, vanilla, lightweight (~16kb gzipped 🎉 ), configurable select plugin for modern browsers. Similar to Select2 and Selectize but without

Aug 9, 2022
Owner
Cecilia Benitez
I'm a Front-End Developer. My strength is in front-end React development, and I have 4 year of experience with JavaScript.
Cecilia Benitez
GitHub
🖼️ An image select component for Streamlit

streamlit-image-select ??️ An image select component for Streamlit. This custom component works just like st.selectbox but with images. It's a great o

Johannes Rieke 28 Jan 3, 2023
Animated sprite hook for react-three-fiber

use-animated-sprite Animated sprite hook for react-three-fiber Dependencies npm install @react-three/drei @react-three/fiber react three Installation

Brit Gardner 7 Dec 4, 2022
🛠 Highly customisable, minimalistic input x select field for React.

Insect ?? Highly customisable, minimalistic input x select field for React. ⚡️ Features Tiny size (~4kb Gzip) 100% responsive. Highly customisable. Su

Kadet 32 Oct 29, 2022
Planets fact site with animated solar system built with ReactJS.

Frontend Mentor - Planets fact site Table of contents Overview Intro The challenge Links My process Built with Features Setup Useful resources Overvie

null 72 Jan 1, 2023
A javascript library to generate animated wavy text!

Wavy Text Animation Library A JavaScript Library which allows you to animate infinite words in an infinite loop in a modern wavy way! Options Vanilla

Murtuzaali Surti 12 Oct 9, 2022
Replaces native cursor with custom animated cursor.

Animated Cursor A pure JS library to replace native cursor with a custom animated cursor. Check out the Demo Contents ?? Features ?? Quickstart ?? Opt

Stephen Scaff 7 Jul 18, 2022
Animated Counter with Vanilla JavaScript

animated-counter [EN] Animated Counter with Vanilla JavaScript For this project, I used loop...of, but the funcionality still exactly the same See mor

Lucas Macedo 1 Apr 6, 2022
Berlin subway map, animated

Ubähnchen ubähnchen.vercel.app An animated live map of the Berlin U-Bahn. How it works Planned mode Schedules are extracted from the GTFS data of the

Antoine Clausse 77 Dec 20, 2022
VanillaJS implementation of an animated rising / falling number.

number-rollup Demo https://marknorrapscm.github.io/number-rollup/ Features Smooth rising / falling number animations with easing options VanillaJS Zer

null 14 Jul 27, 2021
This is a simple javascript file that gives you control over the browser cursor, alowing for fully animated cursors using CSS's cursor functionality.

animatedWebCursors.js This is a simple javascript file that gives you control over the browser cursor, alowing for fully animated cursors using CSS's

alienmelon 32 Dec 25, 2022