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

Jonas Arleth

I found the effect on the iPhone 14 Pro (2022) site (the site is deleted by Apple every year if a new iPhone comes out.). 

Watch the Tutorial to see how I build the effect: https://youtu.be/w0tJnjrRTlg

Apple like Text Gradient Scroll Effect (iPhone 14 Pro Page)

Josh Jacobs

TLDR; people seem to like this circular text with movement, so I thought I'd try and see if I couldn't hack in WF. I did. This is that.

Powered by circletype.js, it's a little wonky and weird with regards to how it's sized... but it works. Includes interactions for page load, scrolling through sections, and for page transitions.

Clone away, and let me know what you think in the comments!

Trendy AF Circular Text

Joseph Berry

Design Direction 002. 

Learn how to create a this custom homepage design with multiple interactions and animations including TweenMax text animations. 

Watch Video Tutorial here: https://youtu.be/bejjNVTs2ZA


Hope you enjoy.

Design-direction-002

If you watch the tutorial, you'll notice that the best performance and sharpness of the lettering can only be achieved with an SVG.
That's actually the way Apple uses it as well. The disadvantage is that you have to export an extra SVG image for your own wording.

Animating text elements with scale does not work, because Chrome renders the font blurry 😟

Effect works well on mobiel too!

Apple.com Zoom In Typo Scroll Animation

Timothy Ricks

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

Text Reveal Animations on Scroll

Bjorn Encuțescu

I rebuild Plink's website in Webflow because I really liked the interactions they have created. I thought it would be cool to learn how to create them in Webflow, and also to make it clonable for others to have a look at and learn how to create these interactions too.

Custom code was used, but there are just a few simple lines.

Plink's website for comparison: https://useplink.com/en/

--

Tutorials incoming on my YouTube channel, subscribe 👉 youtube.com/channel/UCgwvah4M6Anta4_5ACFiuRQ

--

• Do you need web design & development? Get in touch 👉 bjorn-encutescu.webflow.io/

• Follow my daily tips on Instagram 👉instagram.com/bjorn_encutescu/

Plink Webflow Rebuild

Design Direction 008
Clone and Re-use these 5 unique text effects. 

How To Use Video
https://www.youtube.com/watch?v=nWuhiJK7-Gw

THANK YOU. 
Here's to 2020.

Joseph Berry Text Effects

Atwww

Candy Brittle - It's perfect for a candy shop or any other niche that you have in mind.

While browsing through Dribbble, we found a captivating photo and were inspired to recreate it using Webflow.

For the main heading, 'Power of Candy Brittle,' we decided to combine two fonts, Lovelace and Erotique, to create an intriguing effect for this section.

To showcase various elements, we incorporated a slider below, leveraging a slider variation created by Timothy Ricks. We made a few adjustments to ensure it matched the version we discovered on Dribbble precisely.

For the images, we sourced them from the Brittle & Beyond website as well as Unsplash.

Feel free to make use of this template in any of your projects! We are excited about what's to come, and we will be sharing more with you soon.

Twitter: https://twitter.com/Atwww_
Dribbble: https://dribbble.com/Atwww
Website: https://atwww.studio/

Candy Brittle - Cloneable Template

Dhruv Sachdev

10 Typography Interactions

Neue World

Image on Hover for your next WebFlow site. We have created 5 variations on how you can create these beautiful effects. For more tools visit https://www.neue.world/webflow-tools

Image on Hover by Neue World

Vlad Danilchenko

------------------------
Warning! 
I try to put all the projects for copying, so you can reuse them and learn something new.

But you don't get the likes, which supports me. 

Please, give me a "like" if you copy the project
------------------------

Digital Agency in New York City, Chicago & Paris. Clients include Mastercard, Barclays, Adobe, BMW, Ducati etc.

circle-flow

Webflowtips

Revealing texts from different directions is a very popular animation these days. You can find it in hundreds of the best sites, like the one that inspired me: Vendredi Society (https://www.vendredi-society.fr/)
---
The best thing is, it is not hard at all to achieve. In this clonable you can find a simple way to achieve this animation from different sides: top, right, bottom, left.
---
Sign up for the lesson: https://www.webflowtips.com/b/how-to-animate-text-that-reveals-from-different-directions

If you have any questions feel free to comment.

P.S 🙂  🙌  - Like or follow if this was useful for you.

18 of 50

Text Reveal Different Directions

Bien Studio

Dinergy* prides itself on being wholistic, proactive and creative. Our clients say that we react quickly to solve problems and are results driven. Ask us about our blueprint to a cost effective, seamless and hands-on execution. One that will differentiate you, your service or your product. Let us give your product or brand big business muscle.

So what is big business muscle?

We are an international award winning, full service marketing agency and design studio with capabilities beyond the industry norm. Senior experience in all facets of advertising, strategy, design, promotion, digital, sourcing and production which gives your product or brand BIG business muscle. Let's roar from the get go.

Dinergy Marketing Solutions

Ilja van Eck

[ Tutorial ]
https://www.youtube.com/watch?v=aumA-8KQH-I

Staggered letters and word animations are quite popular. I always created these with a duplicate of the original text, but Jan-Willem Wessels (thanks buddy!) shared a great technique with me that uses a text-shadow. It's not only easier, but also better for accessibility. 

Check out Jan-Willem his work on clevermellow.co

Letter stagger animation without duplicate text blocks [ Cloneable ]

Diego Toda de Oliveira

I finally decided to get my hands dirty and learn ThreeJS + React Three Fiber to give life to my ideas using interactive 3D. This project is the end result of my tests and study.

Highly inspired by the Work Louder(c) Creator Micro pad (https://worklouder.cc/creator-micro/), I created a fictional collab between your favorite website builder and this amazing product for a limited edition with custom shortcuts to improve your workflow.

My process:
- 3D model, materials, lights and animation done in Blender
- Used CodeSandbox Cloud to put everything together in R3F (plus some custom scripts used on the Webflow page via data attritbutes)
- Loaded the generated JS bundle in Webflow using custom code

- YOUTUBE TUTORIAL: https://youtu.be/XOIU3mdR9Sc
- Link to the CodeSandbox template: https://codesandbox.io/p/sandbox/flowboard-r3f-b95nx9

Flowboard - Webflow + ThreeJS template

CJ Hersh

1. Text Fill (100% Webflow)
2. Character Tween (Greensock's Tweenmax)
3. Smooth Landing (100% Webflow)
4. GIF Background (Custom CSS)
5. Mosemove Warp (Blotter.JS)

Text Hover Animations

Text animations are everywhere these days on the web. Here are four letter animations using the library anime.js that can spice up your designs. 

To use it just follow these simple steps:

**It only works on published sites not on the Webflow builder **

1. Give a class to the text you want to animate. For example: “animation1”
2. Add a span to the text and give it a class of “letter”
3. Copy the code on "Settings > Before body tag" and make sure you change the class to the one you used on step 1. 

That's it! If you have any questions feel free to comment.

Sign up for the lesson: https://www.webflowtips.com/b/how-to-animate-texts-using-anime-js

P.S 🙂  🙌  - Like or follow if this was useful for you.

14 of 50

Text Animations with Anime.js

WebDev For You

This demo showcases a circular slider with animated panels in the background. The panels were created in After Effects and triggered via a slider element in Webflow. The main slider was also linked to a secondary slider that showcases text. The sliders were linked together via custom code.

Inspired by the following Dribbble shot from Keshav Dev: https://dribbble.com/shots/12128648-Wildlife-Shot-Animation

WebDev For You - Interaction #143

1070795817

1316201488

1316201489

1567550242

1592612642

1726628865

173927913

1863160016

1905118106

2144870841

2213518682

2216482092

2339906037

2351366352

2355632600

https://s3.amazonaws.com/webflow-dev-assets/66fd83b6cc0c8c6ed0e398e6%2Fcontent.json

2401116685

2486364096

gpt-4o

gpt-4o-mini

2546957535

2631983062

2789269995

2857348505

2903381045

User Accounts will no longer be available on January 29, 2026.

Visit Webflow’s Help Center for migration guidance and more info.

3023147062

3106924665

3112069432

3120801339

3258716925

3289310561

3313039722

3315729993

3410056804

3410497685

3557227276

3590523401

3591394191

3801251705

3913199261

3934148661

4092855684

4103643638

4206156914

451433404

504462606

622649767

622649768

657188092

665836192

737109165

772001133

882147072

938734410

1004117952

1049811722

105340574

1120744071

1131151533

1157563538

1171384976

1197475705

1229056119

1234765101

1236803103

1250328847

1290849437

1292405251

130043074

1306352991

1312703771

1322655470

1336067073

1350250754

1380813821

1380896143

1386092744

1406455659

1418395020

1433303746

143629253

1437392009

1455163268

1455742168

1457420719

1458975701

1475952185

1499868407

1501922903

1509255256

1545754914

1557989767

1568482678

1571190444

1575119218

1662541974

1665126082

1680201874

1680586027

1694411451

1701648875

173185438

1753134293

1803820771

183596474

1856326096

1857805694

187681422

1925696804

1928608458

1931880952

1944913766

1968719184

2031799369

2084850560

2085494476

2091902242

21336891

214950889

2161096664

216777687

2182233325

2184630439

2187198051

2193997669

2198334698

2224902271

224017973

2276264697

23146391

2332153945

2340184165

2354820654

2361218180

2378130748

2403993584

2458909760

2465149363

2487845889

2494249199

2519229707

2524380347

2526987152

2529408901

2550320370

2571858959

2605123638

2608516337

Best Text Animation Websites | Free Examples & Designs

Discover Text animation websites
built by the Webflow community

Browse, clone, and customize thousands of websites #MadeinWebflow. Looking for templates?

Discover Text animation websites built by the Webflow community

Browse, clone, and customize thousands of websites #MadeinWebflow. Looking for templates?

Discover Text animation websites
built by the Webflow community