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

Neato headers for some gnarly emphasis. Each letter hops.

Hopping Header

minim-hopping-header

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: Press the "W" in Wordle logo to activate the 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]

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

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

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