Discover the best letter-animation websites created by professional designers. Get inspired and start planning your perfect letter-animation web design today!

Here's a small project that potentionally could be used for some cool stuff. Feel free to clone it and use for whatever you want.

I previously used Anime.js for the letter staggering, but it caused some ugly glitches which were extremely hard to get rid of, so now it's just using Webflow's amazing native interactions instead. 

The section scrolling is made possible by Scrollify.js, which you'll find in the home page's custom body code.

https://twitter.com/robingranqvist_
https://instagram.com/robingranqvist_
https://dribbble.com/robingranqvist

robin.granqvist@hotmail.se 🤙

Section Scroll Interaction

Section Scroll Interactions using Scrollify.js & native Webflow interactions

This cloneable uses a paid GSAP plugin called SplitText that can be purchased at https://greensock.com/club/

Text Animations

Text Reveal Animations on Scroll

This is a fun little Javascript hover animation. 

The color transition for the letters can be modified by temporarily creating a class called "letter" and change its font color transition.

The code can be found in the page settings 🤙

Random Letter Color on Hover

Here's another weirdly trippy scrolling animation.

I finally figured out how to do layered section scrolling using Locomotive & Gsap. It also plays around with randomized scolling speed dynamically added to each letter in the words in each section.

I kinda like it.

Another Trippy Smooth Scroll Background & Gsap Letter Animation

Another Trippy Smooth Scroll Background and Letter Animation

Using Locomotive.js, Gsap ScrollTrigger & some custom Javascript. 3D renders from Unsplash.

Finally figured out how to do those "fixed" background image scroll thingys, so here's a smooth scrolled section thing with some randomized letter opacity animations.

Smooth Scroll Background & Gsap Letter Animation

Write the text you want and it will appear letter by letter like if you were typing with an old typewriter. With the Udesly typewriter widget for Webflow you can create nice looking, animated typing effects. It’s easy to use, highly customizable and very powerful and flexible.

Typewriter Cloneable

Typewriter

Having seen the explosion in Wordle's popularity - I wanted to try to rebuild it inside Webflow! I think we got pretty close?

P.S: There is a HIDDEN "Webflow mode" 🐇  which WHEN ACTIVATED switches the dictionary to only include words related to CSS, HTML & all things Webflow ;) 

All interactions, popups, word lists & attributes are inside Webflow. 

Rules are the same as the original: You have six tries to guess the 5 letter word. Except, every time you refresh - the word changes (so you can keep playing). Let me know if you found this useful? Easily customize the wordlist to your company/ niche or industry.

Original game: https://www.powerlanguage.co.uk/wordle

Wordle Game [Rebuild]

Neato headers for some gnarly emphasis. Each letter hops.

Hopping Header

minim-hopping-header

This is a rebuild of a cute letterer animation I saw on https://www.chungiyoo.com/.

Ran Segall made a video about them, too. https://www.youtube.com/watch?v=AuxU3nR3oEM


Feel free to clone and share.

Letter Transform

Cool Letter Transform

The Miami Letter delivers free news and analysis from one of the most news-rich cities in the United States. Our letter is a daily digest of what’s happening in Miami delivered to your inbox every morning in a modern and brief design.

Miami Letter

A portfolio case study written as a love letter to design tools by a designer.

Will Man ✏️ Design

Will Man Design

This is a marketing funnel and sales letter for generating leads for neurofeedback therapy.

Fountain City Family Chiropractic

Neurofeedback Lead Generation

Evil Twins Studio

This website was created to honour and recognize Melissa Mendez's longstanding efforts to grow the Webflow community.

A group of Webflowers (collectively known as the Flow Rogues), who hadn't previously collaborated on a project, banded together to craft this website in a single week.

We've re-released the site in honour of Melissa being named the Community Leader of the Year at the 2022 Webflow Awards at Webflow Conf.

-

Melissa Mendez is the founder of Eurecah — a Florida-based Webflow agency, and creator of the *flow Party — the largest Webflow community in the world.

Follow the *flow Party on Twitter at @JoinFlowParty and follow Melisssa at @Melydelmar06.

-

The Flow Rogues are a collective of passionate creative professionals based around the globe — from Brazil to Canada to the United Kingdom to Portugal.

Team Members:

Breeona Nechole
Diego Toda de Oliveira
Eric W Odom
Georgiana Matyus
Maria Martins
No-Code Benny / Ben Sabic
Rahul Islam
Skylar Kitchen
Tom Buizer



Melissa Mendez Appreciation Day

For Melissa Mendez - A Flow Rogues Project

Nafeesa For Huge

nafeesaforhuge

Support case to build Alphabet grid. The letters in the grid acts like a navigation menu. Each letter links to a section

Only A and B is likning in the sample

Discover letter animation websites built by the Webflow community

Discover letter animation websites built by the Webflow community