80+ JavaScript Text Effects

Last Updated on by in JavaScript
JavaScript Text Effects

If you’re looking to spruce up your website with captivating text animations that present information in a visually appealing and user-friendly manner, you’re in luck. Our collection of JavaScript Text Effects offers a myriad of options, from dynamic animations to stylish transitions.

Elevate your textual content with dynamic animations and styles that captivate users. We have gathered free HTML and JavaScript text effects examples sourced from top platforms like GitHub and CodePen.

Whether you’re an expert or a beginner, you can dive into this comprehensive collection and effortlessly create typewriter effects, glowing text animations, or even neon-inspired styling. Elevate user engagement on your website with our interactive hover effects or subtle fades. You’ll swiftly master adding flair to your text, whether it’s through shadows, scaling, or creative transitions.

These effects aren’t just eye candy – they enhance the user experience, making your site more engaging and interactive. Plus, each example is cross-browser compatible and works seamlessly on desktops, tablets, and mobile devices.

Whether you’re a developer, designer, or just looking to enhance user interaction, these innovative designs cater to your needs, ensuring your website stands out and keeps visitors coming back for more.

1. Variable Font Animation

See the Pen
Variable Font Animation
by Tanner Dolby (@tannerdolby)
on CodePen.


Author: Tanner Dolby @tannerdolby
Links: Source Code / Demo
Created on: July 4, 2020
Made with: HTML, CSS (SCSS), JS (Babel)

2. Interactive particles text create with three.js

See the Pen
Interactive particles text create with three.js
by Ricardo Sanprieto (@sanprieto)
on CodePen.


Author: Ricardo Sanprieto @sanprieto
Links: Source Code / Demo
Created on: February 10, 2021
Made with: HTML, CSS, JS

3. Splitting Splash 🌊 | Bouncy CSS Text Animation with Splitting.js

See the Pen
Splitting Splash 🌊 | Bouncy CSS Text Animation with Splitting.js | @keyframers 3.1
by @keyframers (@keyframers)
on CodePen.


Author: @keyframers @keyframers
Links: Source Code / Demo
Created on: April 22, 2020
Made with: HTML, CSS (SCSS), JS

4. Take It Easy

See the Pen
Take It Easy
by Adam Kuhn (@cobra_winfrey)
on CodePen.


Author: Adam Kuhn @cobra_winfrey
Links: Source Code / Demo
Created on: April 10, 2020
Made with: HTML(Haml), CSS (SCSS), JS

5. Solid

See the Pen
Solid
by Cyd Stumpel (@Sidstumple)
on CodePen.


Author: Cyd Stumpel @Sidstumple
Links: Source Code / Demo
Created on: January 8, 2021
Made with: HTML, CSS(SCSS), JS (Babel)

6. Stretch Typo

See the Pen
Stretch Typo
by ilithya (@ilithya)
on CodePen.


Author: ilithya @ilithya
Links: Source Code / Demo
Created on: January 28, 2020
Made with: HTML(Pug), CSS (SCSS) , JS (Babel)

7. WEEKEND

See the Pen
WEEKEND 😃
by Sikriti Dakua (@dev_loop)
on CodePen.


Author: Sikriti Dakua @dev_loop
Links: Source Code / Demo
Created on: June 27, 2020
Made with: HTML, CSS(SCSS), JS

8. SMASH

See the Pen
SMASH
by Frank Force (@KilledByAPixel)
on CodePen.


Author: Frank Force @KilledByAPixel
Links: Source Code / Demo
Created on: April 20, 2020
Made with: HTML, CSS, JS

9. Repetition Text Animation

See the Pen
Repetition Text Animation
by P (@petegarvin1)
on CodePen.


Author: P @petegarvin1
Links: Source Code / Demo
Created on: November 17, 2020
Made with: HTML, CSS(SCSS), JS

10. GSAP 3 & ETC Variable Font Caterpillar

See the Pen
GSAP 3 & ETC Variable Font Caterpillar
by Pete Barr (@petebarr)
on CodePen.


Author: Pete Barr @petebarr
Links: Source Code / Demo
Created on: September 29, 2019
Made with: HTML, CSS(SCSS), JS

11. Dismantling Text w/ GreenSock 🍏

See the Pen
Dismantling Text w/ GreenSock 🍏
by Jhey (@jh3y)
on CodePen.


Author: Jhey @jh3y
Links: Source Code / Demo
Created on: February 28, 2020
Made with: HTML (Pug), CSS (Stylus), JS (Babel)

12. PROUD

See the Pen
PROUD 😊
by Sikriti Dakua (@dev_loop)
on CodePen.


Author: Sikriti Dakua @dev_loop
Links: Source Code / Demo
Created on: June 26, 2020
Made with: HTML, CSS(SCSS), JS

13. Rolling Text Hover Animation

See the Pen
Rolling Text Hover Animation
by Cojea Gabriel (@gabrielcojea)
on CodePen.


Author: Cojea Gabriel @gabrielcojea
Links: Source Code / Demo
Created on: April 18, 2020
Made with: HTML, CSS, JS

14. BOOST

See the Pen
BOOST 💨
by Sikriti Dakua (@dev_loop)
on CodePen.


Author: Sikriti Dakua @dev_loop
Links: Source Code / Demo
Created on: November 3, 2020
Made with: HTML, CSS(SCSS), JS

15. Play Hard

See the Pen
Play Hard
by Chris Gannon (@chrisgannon)
on CodePen.


Author: Chris Gannon @chrisgannon
Links: Source Code / Demo
Created on: July 28, 2019
Made with: HTML, CSS, JS

16. Text

See the Pen
Untitled
by Malik Dellidj (@kowlor)
on CodePen.


Author: Malik Dellidj @kowlor
Links: Source Code / Demo
Created on: February 24, 2020
Made with: HTML (Pug), CSS (Sass), JS

17. EXTENDED

See the Pen
EXTENDED
by Chris Gannon (@chrisgannon)
on CodePen.


Author: Chris Gannon @chrisgannon
Links: Source Code / Demo
Created on: January 18, 2020
Made with: HTML, CSS, JS

18. Text with background image GSAP animation

See the Pen
Text with background image GSAP animation
by George Burrell (@sheixt)
on CodePen.


Author: George Burrell @sheixt
Links: Source Code / Demo
Created on: September 23, 2020
Made with: HTML, CSS(SCSS), JS

19. Selfie Crawl

See the Pen
Selfie Crawl
by Chris Coyier (@chriscoyier)
on CodePen.


Author: Chris Coyier @chriscoyier
Links: Source Code / Demo
Created on: July 24, 2019
Made with: HTML, CSS(SCSS), JS

20. COFFEE FIRST

See the Pen
COFFEE FIRST ☕
by Sikriti Dakua (@dev_loop)
on CodePen.


Author: Sikriti Dakua @dev_loop
Links: Source Code / Demo
Created on: June 19, 2020
Made with: HTML, CSS(SCSS), JS

21. VIBES

See the Pen
VIBES
by Sikriti Dakua (@dev_loop)
on CodePen.


Author: Sikriti Dakua @dev_loop
Links: Source Code / Demo
Created on: January 26, 2020
Made with: HTML (Pug), CSS(SCSS), JS

22. GOOD MOOD

See the Pen
GOOD MOOD 😊
by Sikriti Dakua (@dev_loop)
on CodePen.


Author: Sikriti Dakua @dev_loop
Links: Source Code / Demo
Created on: August 17, 2020
Made with: HTML, CSS(SCSS), JS

23. Responsive meandering text w/ Splitting

See the Pen
Responsive meandering text w/ Splitting 😎
by Jhey (@jh3y)
on CodePen.


Author: Jhey @jh3y
Links: Source Code / Demo
Created on: April 9, 2020
Made with: HTML (Pug), CSS (Stylus), JS (Babel)

24. Rough Notation

See the Pen
Rough Notation
by Chris Coyier (@chriscoyier)
on CodePen.


Author: Chris Coyier @chriscoyier
Links: Source Code / Demo
Created on: June 19, 2020
Made with: HTML, CSS(SCSS), JS

25. Perspective Hover Effect

See the Pen
Perspective Hover Effect
by Vadym (@vadymhimself)
on CodePen.


Author: Vadym @vadymhimself
Links: Source Code / Demo
Created on: May 15, 2019
Made with: HTML, CSS(SCSS), JS(Babel)

26. Black Lives Matter – Refresh if just black screen

See the Pen
Black Lives Matter – Refresh if just black screen
by P (@petegarvin1)
on CodePen.


Author: P @petegarvin1
Links: Source Code / Demo
Created on: June 8, 2020
Made with: HTML, CSS, JS

27. Furry

See the Pen
Furry
by rafaelcastrocouto (@rafaelcastrocouto)
on CodePen.


Author: rafaelcastrocouto @rafaelcastrocouto
Links: Source Code / Demo
Created on: August 16, 2020
Made with: HTML, CSS, JS

28. Hover Alpha Effect

See the Pen
Hover Alpha Effect
by ilithya (@ilithya)
on CodePen.


Author: ilithya @ilithya
Links: Source Code / Demo
Created on: December 4, 2019
Made with: HTML(Pug), CSS (SCSS) , JS (Babel)

29. SNOOZE

See the Pen
SNOOZE 😴
by Sikriti Dakua (@dev_loop)
on CodePen.


Author: Sikriti Dakua @dev_loop
Links: Source Code / Demo
Created on: June 18, 2020
Made with: HTML, CSS(SCSS), JS

30. IN TOO DEEP

See the Pen
IN TOO DEEP
by Alex Trost (@a-trost)
on CodePen.


Author: Alex Trost @a-trost
Links: Source Code / Demo
Created on: April 29, 2020
Made with: HTML (Pug), CSS, JS (Babel)

31. Interactive Variable Text

See the Pen
Interactive Variable Text
by JennyBKowalski (@JennyBKowalski)
on CodePen.


Author: JennyBKowalski @JennyBKowalski
Links: Source Code / Demo
Created on: March 16, 2021
Made with: HTML, CSS, JS

32. Bricks

See the Pen
Bricks
by Cassie Evans (@cassie-codes)
on CodePen.


Author: Cassie Evans @cassie-codes
Links: Source Code / Demo
Created on: January 22, 2020
Made with: HTML, CSS, JS

33. GSAP Practice

See the Pen
GSAP Practice
by Caroline Artz (@carolineartz)
on CodePen.


Author: Caroline Artz @carolineartz
Links: Source Code / Demo
Created on: May 18, 2020
Made with: HTML(Pug), CSS (SCSS), JS (Babel)

34. Motion path scaling

See the Pen
Motion path scaling
by Michelle Barker (@michellebarker)
on CodePen.


Author: Michelle Barker @michellebarker
Links: Source Code / Demo
Created on: April 9, 2020
Made with: HTML, CSS (SCSS), JS

35. GSAP JS: multiple text-shadow : hover

See the Pen
GSAP JS: multiple text-shadow : hover
by Noob (@stealy)
on CodePen.


Author: Noob @stealy
Links: Source Code / Demo
Created on: August 14, 2020
Made with: HTML, CSS, JS

36. Flexible, Full-Width, “Justified” Text Blocks

See the Pen
Flexible, Full-Width, “Justified” Text Blocks
by Reuben L. Lillie (@reubenlillie)
on CodePen.


Author: Leuben L. Lillie @reubenlillie
Links: Source Code / Demo
Created on: April 25, 2019
Made with: HTML, CSS, JS

37. Dream Dangerously: Smoky text on hover

See the Pen
Dream Dangerously: Smoky text on hover
by Annie (@anniebombanie)
on CodePen.


Author: Annie @anniebombanie
Links: Source Code / Demo
Created on: May 17, 2020
Made with: HTML, CSS(SCSS), JS

38. Typing effect using JavaScript

See the Pen
Typing effect using JavaScript – Day 10 of #30Days30Projects
by Ishaan Sheikh (@sheikh_ishaan)
on CodePen.


Author: Ishaan Sheikh @sheikh_ishaan
Links: Source Code / Demo
Created on: January 4, 2020
Made with: HTML, CSS(SCSS), JS

39. Resizable Logo! | @keyframers 3.11

See the Pen
Resizable Logo! | @keyframers 3.11
by @keyframers (@keyframers)
on CodePen.


Author: @keyframers @keyframers
Links: Source Code / Demo
Created on: August 4, 2020
Made with: HTML, CSS (SCSS), JS

40. Particle Text

See the Pen
Particle Text
by Sean Free (@seanfree)
on CodePen.


Author: Sean Free @seanfree
Links: Source Code / Demo
Created on: November 24, 2019
Made with: HTML, CSS (SCSS) , JS (Babel)

41. 3D Text – Mouse effect

See the Pen
3D Text – Mouse effect
by Louis Hoebregts (@Mamboleoo)
on CodePen.


Author: Louis Hoebregts @Mamboleoo
Links: Source Code / Demo
Created on: May 13, 2020
Made with: HTML, CSS(SCSS), JS

42. Primary Colors Isometric Text

See the Pen
Primary Colors Isometric Text
by Yoav Kadosh (@ykadosh)
on CodePen.


Author: Yoav Kadosh @ykadosh
Links: Source Code / Demo
Created on: January 15, 2019
Made with: HTML, CSS(SCSS), JS(Babel)

43. Mark text effect on scroll w/ IO

See the Pen
Mark text effect on scroll w/ IO
by Mattia Astorino (@equinusocio)
on CodePen.


Author: Mattia Astorino @equinusocio
Links: Source Code / Demo
Created on: July 21, 2020
Made with: HTML, CSS(PostCSS) / JS

44. How do I get a custom colored underline that will span multiple lines?

See the Pen
How do I get a custom colored underline that will span multiple lines?
by Will King (@Wking)
on CodePen.


Author: Will King @Wking
Links: Source Code / Demo
Created on: August 15, 2017
Made with: HTML, CSS(SCSS), JS(Babel)

45. “No Time To Die” Title sequence

See the Pen
“No Time To Die” Title sequence
by Nick Watton (@2Mogs)
on CodePen.


Author: Nick Watton @2Mogs
Links: Source Code / Demo
Created on: February 18, 2020
Made with: HTML, CSS(SCSS), JS

46. BELIEVE IN YOURSELF

See the Pen
BELIEVE IN YOURSELF 🤗
by Sikriti Dakua (@dev_loop)
on CodePen.


Author: Sikriti Dakua @dev_loop
Links: Source Code / Demo
Created on: July 19, 2020
Made with: HTML, CSS(SCSS), JS

47. Blended text layers

See the Pen
Blended text layers
by Genevieve (@jennaveeve)
on CodePen.


Author: Genevieve @jennaveeve
Links: Source Code / Demo
Created on: November 14, 2017
Made with: HTML, CSS(SCSS), JS (Babel)

48. Spotlight Cursor Text Screen

See the Pen
Spotlight Cursor Text Screen
by Caroline Artz (@carolineartz)
on CodePen.


Author: Caroline Artz @carolineartz
Links: Source Code / Demo
Created on: January 2, 2020
Made with: HTML(Pug), CSS (SCSS) , JS (Babel)

49. LIGHT WORK

See the Pen
LIGHT WORK 🏋️
by Sikriti Dakua (@dev_loop)
on CodePen.


Author: Sikriti Dakua @dev_loop
Links: Source Code / Demo
Created on: May 11, 2020
Made with: HTML, CSS(SCSS), JS

50. JS Text

See the Pen
Untitled
by Bình Cao (@ctbinhit)
on CodePen.


Author: Bình Cao @ctbinhit
Links: Source Code / Demo
Created on: May 19, 2017
Made with: HTML, CSS (SCSS) , JS

51. Number 8

See the Pen
Number 8
by Miguel (@ruidovisual)
on CodePen.


Author: Miguel @ruidovisual
Links: Source Code / Demo
Created on: April 7, 2020
Made with: HTML, CSS(Sass), JS

52. HEART

See the Pen
HEART❤️
by Sikriti Dakua (@dev_loop)
on CodePen.


Author: Sikriti Dakua @dev_loop
Links: Source Code / Demo
Created on: July 12, 2020
Made with: HTML, CSS(SCSS), JS

53. Text Scramble Effect

See the Pen
Text Scramble Effect
by Justin Windle (@soulwire)
on CodePen.


Author: Justin Windle @soulwire
Links: Source Code / Demo
Created on: July 6, 2016
Made with: HTML, CSS(Stylus), JS (Babel)

54. Canvas Texture

See the Pen
Canvas Texture
by Orville Chomer (@orvilleChomer)
on CodePen.


Author: Orville Chomer @orvilleChomer
Links: Source Code / Demo
Created on: February 12, 2020
Made with: HTML, CSS, JS

55. HELLO

See the Pen
HELLO 👋
by Sikriti Dakua (@dev_loop)
on CodePen.


Author: Sikriti Dakua @dev_loop
Links: Source Code / Demo
Created on: May 5, 2020
Made with: HTML, CSS(SCSS), JS

56. Futuristic Resolving/Typing Text Effect feat. GLaDOS

See the Pen
Futuristic Resolving/Typing Text Effect feat. GLaDOS
by Kevin (@qkevinto)
on CodePen.


Author: Kevin @qkevinto
Links: Source Code / Demo
Created on: November 28, 2015
Made with: HTML, CSS(SCSS), JS(Babel)

57. Hello, World

See the Pen
Hello, World #codepenchallenge
by Braydon Coyer (@braydoncoyer)
on CodePen.


Author: Braydon Coyer @braydoncoyer
Links: Source Code / Demo
Created on: March 25, 2020
Made with: HTML, CSS(SCSS), JS (TypeScript)

58. Blast text

See the Pen
Blast text
by Bennett Feely (@bennettfeely)
on CodePen.


Author: Bennett Feely @bennettfeely
Links: Source Code / Demo
Created on: December 31, 2019
Made with: HTML, CSS(SCSS), JS

59. Splitting and motion path

See the Pen
Splitting and motion path
by Michelle Barker (@michellebarker)
on CodePen.


Author: Michelle Barker @michellebarker
Links: Source Code / Demo
Created on: January 29, 2020
Made with: HTML, CSS, JS

60. Glow sparks text

See the Pen
glow sparks text
by saeed (@saeed924178)
on CodePen.


Author: saeed @saeed924178
Links: Source Code / Demo
Created on: March 21, 2021
Made with: HTML, CSS, JS

61. THREE Text Animation

See the Pen
THREE Text Animation #5
by Szenia Zadvornykh (@zadvorsky)
on CodePen.


Author: Szenia Zadvornykh @zadvorsky
Links: Source Code / Demo
Created on: April 7, 2016
Made with: HTML, CSS, JS

62. Neumorphism Typo

See the Pen
Neumorphism Typo
by ilithya (@ilithya)
on CodePen.


Author: ilithya @ilithya
Links: Source Code / Demo
Created on: March 1, 2020
Made with: HTML(Pug), CSS (SCSS) , JS (Babel)

63. Kinetic Letters

See the Pen
Kinetic Letters ✨
by Anna Zenn Scavenger (@ScavengerFrontend)
on CodePen.


Author: Anna the Scavenger
Links: Source Code / Demo
Created on: March 24, 2020
Made with: HTML, CSS, JS

64. Creativity Now

See the Pen
Creativity Now✨ (click anywhere)
by Anna Zenn Scavenger (@ScavengerFrontend)
on CodePen.


Author: Anna Zenn Scavenger
Links: Source Code / Demo
Created on: March 29, 2021
Made with: HTML, CSS, JS

65. Type async

See the Pen
Type async ✍
by Luciano Felix (@FelixLuciano)
on CodePen.


Author: Luciano Felix @FelixLuciano
Links: Source Code / Demo
Created on: March 23, 2020
Made with: HTML, CSS(Sass), JS

66. Animated SVG Signature

See the Pen
Animated SVG Signature
by Silvestar Bistrović (@CiTA)
on CodePen.


Author: Silvestar Bistrović @CiTA
Links: Source Code / Demo
Created on: December 20, 2019
Made with: HTML, CSS(SCSS), JS (Babel)

67. Creativity Now

See the Pen
Creativity Now✨ (click anywhere)
by Anna Zenn Scavenger (@ScavengerFrontend)
on CodePen.


Author: Anna the Scavenger
Links: Source Code / Demo
Created on: March 29, 2021
Made with: HTML, CSS, JS

68. Flexible, Full-Width, “Justified” Text Blocks

See the Pen
Flexible, Full-Width, “Justified” Text Blocks
by Reuben L. Lillie (@reubenlillie)
on CodePen.


Author: Reuben L. Lillie @reubenlillie
Links: Source Code / Demo
Created on: April 25, 2019
Made with: HTML, CSS, JS

69. Staggered Blink Text Menu

See the Pen
Staggered Blink Text Menu
by alphardex (@alphardex)
on CodePen.


Author: alphardex @alphardex
Links: Source Code / Demo
Created on: January 28, 2020
Made with: HTML, CSS (SCSS), JS (TypeScript)

70. Particle Effects on Text Selection

See the Pen
Particle Effects on Text Selection
by T.J. Fogarty (@tjFogarty)
on CodePen.


Author: T.J. Fogarty @tjFogarty
Links: Source Code / Demo
Created on: March 19, 2020
Made with: HTML, CSS(SCSS), JS (Babel)

71. More cascading text effects w/ Scrolling + ScrollOut

See the Pen
More cascading text effects w/ Scrolling + ScrollOut 👊😎
by Jhey (@jh3y)
on CodePen.


Author: Jhey @jh3y
Links: Source Code / Demo
Created on: November 5, 2018
Made with: HTML (Pug), CSS (Stylus), JS (Babel)

72. Staggered Glow In Text

See the Pen
Staggered Glow In Text
by alphardex (@alphardex)
on CodePen.


Author: alphardex @alphardex
Links: Source Code / Demo
Created on: November 3, 2019
Made with: HTML, CSS (SCSS), JS (TypeScript)

73. Splitting.js: CSS vars for split words & chars

See the Pen
Splitting.js: CSS vars for split words & chars
by Shaw (@shshaw)
on CodePen.


Author: Shaw @shshaw
Links: Source Code / Demo
Created on: December 22, 2017
Made with: HTML, CSS (SCSS), JS

74. Text along path svg

See the Pen
Text along path svg
by Fabio Ottaviani (@supah)
on CodePen.


Author: Fabio Ottaviani @supah
Links: Source Code / Demo
Created on: October 17, 2019
Made with: HTML, CSS(SCSS), JS (Babel)

75. Outlines and overprints

See the Pen
Outlines and overprints
by Jason Pamental (@jpamental)
on CodePen.


Author: Jason Pamental @jpamental
Links: Source Code / Demo
Created on: March 13, 2020
Made with: HTML, CSS, JS

76. Page layout text effects with clip-path

See the Pen
Page layout text effects with clip-path
by Mandy Michael (@mandymichael)
on CodePen.


Author: Mandy Michael @mandymichael
Links: Source Code / Demo
Created on: April 14, 2017
Made with: HTML, CSS(SCSS), JS

77. Textillate Text Effects

See the Pen
Textillate Text Effects
by Brad Barbin (@barbin)
on CodePen.


Author: Brad Barbin @barbin
Links: Source Code / Demo
Created on: March 26, 2014
Made with: HTML, CSS, JS

78. Only Hipster Text Effects

See the Pen
15: CSS-Only Hipster Text Effects
by Angela He (@zephyo)
on CodePen.


Author: Angela He @zephyo
Links: Source Code / Demo
Created on: December 29, 2018
Made with: HTML(Pug), CSS(SCSS), JS

79. Showreel Intro Text

See the Pen
Showreel Intro Text
by Tom Miller (@creativeocean)
on CodePen.


Author: Tom Miller @creativeocean
Links: Source Code / Demo
Created on: March 11, 2020
Made with: HTML, CSS, JS

80. Cascading text effects

See the Pen
Cascading text effects 📶✍️🤓
by Jhey (@jh3y)
on CodePen.


Author: Jhey @jh3y
Links: Source Code / Demo
Created on: March 2, 2017
Made with: HTML (Pug), CSS (Stylus), JS (Babel)

81. Letter Drop jQuery Plugin

See the Pen
Letter Drop jQuery Plugin
by Rich (@KryptoniteDove)
on CodePen.


Author: Rich @KryptoniteDove
Links: Source Code / Demo
Created on: July 30, 2014
Made with: HTML, CSS, JS

82. Text Effects using GSAP

See the Pen
Text Effects using GSAP
by Fredy Sandoval (@Oniyami)
on CodePen.


Author: Fredy Sandoval @Oniyami
Links: Source Code / Demo
Created on: July 9, 2014
Made with: HTML, CSS, JS

Age calculator tool

🎂✨ Discover your age in detail and with countdown to your next birthday with fun facts! 🎈🎉

Calculate your age now!
Digamber - Author positronX.io

Hi, I'm Digamber Singh, a New Delhi-based full-stack developer, tech author, and open-source contributor with 10+ years' experience in HTML, CSS, JavaScript, PHP, and WordPress.