A little animation for a big menu where the letters of a word shuffle to become the first letter of each menu item.

Overview

Letter Shuffle Animation for a Menu

A little animation for a big menu where the letters of a word shuffle to become the first letter of each menu item.

Image Title

Article on Codrops

Demo

Installation

Install dependencies:

npm install

Compile the code for development and start a local server:

npm start

Create the build:

npm run build

Credits

Misc

Follow Codrops: Twitter, Facebook, GitHub, Instagram

License

MIT

Made with 💙 by Codrops

You might also like...

Provides a KafkaJS-compatible handler for processing messages that facilitates publishing to delayed-retry or dead-letter topics

kafkajs-async-retry This module handles retries and dead-lettering for messages from a Kafka topic without blocking the processing of subsequent messa

Dec 5, 2022

A port of bitcoin-core that will (over time) become TS friendly.

bitcoin-core A modern Bitcoin Core REST and RPC client to execute administrative tasks, multiwallet operations and queries about network and the block

Nov 22, 2022

As babies smash on the keyboard, images, letters and numbers appear on the screen

As babies smash on the keyboard, images, letters and numbers appear on the screen

Baby Bam Bam As babies smash on the keyboard, images, letters and numbers appear on the screen. Try the many options and find the ones that are right

Oct 24, 2022

A simple lightweight file dropzone component based on jQuery. You can easily make any existing element become a dropzone that holds files.

file-dropzone A simple lightweight file dropzone component based on jQuery. You can easily make any existing element become a dropzone that holds file

May 31, 2021

AutoSend Letters HeadHunter — это скрипт для автоматической отправки откликов на HeadHunter (hh).

AutoSend Letters HeadHunter — это скрипт для автоматической отправки откликов на HeadHunter (hh).

AutoSend Letters HeadHunter Описание проекта AutoSend Letters HeadHunter — это скрипт для автоматической отправки откликов на HeadHunter (hh). Для чег

Dec 21, 2022

A highly customizable platform ready to be a portfolio website, and become a lot more with some of your own components

A highly customizable platform ready to be a portfolio website, and become a lot more with some of your own components

Vextra Elegant and animated portfolio website. Demo: vextra.vercel.app Vextra is a portfolio template, packed with animations with a satisfying flow t

Sep 19, 2022

I made countdown birthday and fireworks animation using HTML Canvas, CSS, JS. The fireworks animation gonna come out once the countdown is finished or in other words, "Birthday Time".

Countdown-Birthday-Fireworks-Animation I made countdown birthday and fireworks animation using HTML Canvas, CSS, JS. The fireworks animation gonna com

Dec 31, 2022

Animation library build on top of web animation API (WAAPI)

unanime.js Javascript animation library build on top of web animation API (WAAPI). Learn more about WAAPI: Web animation API Documentation Blog Daniel

Jun 21, 2022
Comments
  • "Novels" Nav Element has an issue on Firefox!

    Noticed a bug for the Novels nav element on Firefox @crnacura , just above the nav element "Memoirs", Chrome & Safari seems to be fine.

    Screenshot for reference: Screen Shot 2022-04-03 at 7 17 13 PM

    Great animation btw! 😍

    opened by orangeSunshine901 0
Owner
Codrops
Codrops
A flexible and extensible javascript library for letters animation simulations.

LetterLoading LetterLoading js is a javascript library for making awesome letter simulations. It default simulation is a letter loading simulation. Co

kelvinsekx 5 Mar 22, 2022
Quick and easy spring animation. Works with other animation libraries (gsap, animejs, framer motion, motion one, @okikio/animate, etc...) or the Web Animation API (WAAPI).

spring-easing NPM | Github | Docs | Licence Quick and easy spring animations. Works with other animation libraries (gsap, animejs, @okikio/animate, mo

Okiki Ojo 34 Dec 14, 2022
This bot was created with the sole purpose of replying to messages with the word "que" with the word "so"

UselessComplete This bot was created with the sole purpose of replying to messages with the word "que" with the word "so" If you want tu support the b

ThisIsAName 6 Aug 30, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

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

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
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

George Raptis 6 Jun 2, 2022
Shuffle texts.

shuffleText This is JavaScript file. When mouse over element shuffle texts in html. It is easy to use it for everyone. Update Infomation If you make s

Toshiya Marukubo 9 Apr 5, 2022
[Trybe] Project Mistery Letter

Bem vindo ao Mystery Letter Olá esse e mais um projeto feito por mim do curso da Trybe. Esse projeto e um gerador de texto que, ao colocar o texto na

Luiz Wanderson Dev 5 Oct 7, 2022
A letter learning game I built for my son in React.js.

Evvie's Letter Game This project was bootstrapped with Create React App. Learning Letters / Evvie's Letter Game Thanks for checking out Evvie's letter

Jesse Brink 4 Jan 18, 2022