45+ JavaScript Text Effects - Free Code + Demos
Collection of 45+ JavaScript Text Effects. All items are 100% free and open-source. The list also includes 3D javascript text effects, circle, animated, responsive, with motion path, and with particles.
1. Take It Easy
Author: Adam Kuhn (cobra_winfrey)
Links: Source Code / Demo
Created on: April 10, 2020
Made with: Haml, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Haml
2. Responsive Meandering Text W/ Splitting 😎
Author: Jhey (jh3y)
Links: Source Code / Demo
Created on: April 8, 2020
Made with: Pug, Stylus, Babel
CSS Pre-processor: Stylus
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: css, motion-path, offset-path, animation, design
3. Motion Path Scaling
Using Resize Observer to scale the element using the path
Author: Michelle Barker (michellebarker)
Links: Source Code / Demo
Created on: April 8, 2020
Made with: HTML, SCSS, JS
Tags: motion path
4. Number 8
Author: Miguel (ruidovisual)
Links: Source Code / Demo
Created on: April 6, 2020
Made with: HTML, Sass, JS
5. Hello World
Author: Braydon Coyer (braydoncoyer)
Links: Source Code / Demo
Created on: March 25, 2020
Made with: HTML, SCSS, TypeScript
Tags: cpc-hello-world, codepenchallenge, html, css, earth
6. 3D Kinetic Typography ✨
Author: Anna the Scavenger (ScavengerFrontend)
Links: Source Code / Demo, Codepen.io
Created on: March 24, 2020
Made with: HTML, CSS, JS
Tags: animation, threejs, typography, interactive, 3d
7. Type Promise ✍
Author: Luciano Felix (FelixLuciano)
Links: Source Code / Demo
Created on: March 23, 2020
Made with: HTML, Sass, JS
Tags: js, promise, type, cpc-hello-world, codepenchallenge
8. Particle Effects On Text Selection
Author: T.J. Fogarty (tjFogarty)
Created on: March 19, 2020
Made with: HTML, SCSS, Babel
Tags: particle, text-selection
9. Outlines And Overprints
An exploration in creating a more graphic headline treatment using overlaps, transparency, and color
Author: Jason Pamental (jpamental)
Links: Source Code / Demo
Created on: March 13, 2020
Made with: HTML, CSS, JS
Tags: typography, variable fonts, responsive-design
10. Showreel Intro Text
This is the intro text used in this pen: https://codepen.io/creativeocean/details/poJaMjB
Author: Tom Miller (creativeocean)
Links: Source Code / Demo, Codepen.io
Created on: March 11, 2020
Made with: HTML, CSS, JS
11. Neumorphism Typo
Neumorphism typography experiment with ThreeJS. Use cursor to move around the shiny effect. On mobile touch + drag screen. Enjoy :)
Author: ilithya (ilithya)
Links: Source Code / Demo
Created on: March 1, 2020
Made with: Pug, SCSS, Babel
CSS Pre-processor: SCSS
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: javascript, threejs, typography, 3d, animation
12. Dismantling Text W/ GreenSock 🍏
Inspired by the recent adverts from a certain fruit named company 😅 Love these types of advert. Whenever I see them, I'm inspired by the challenge of trying to recreate them. This one's a little tricky and requires calculating the positions of various pieces that need to be duplicated et...Read More
Author: Jhey (jh3y)
Links: Source Code / Demo
Created on: February 27, 2020
Made with: Pug, Stylus, Babel
CSS Pre-processor: Stylus
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: greensock, animation, text, design, motion
13. Untitled
Author: Malik Dellidj (kowlor)
Links: Source Code / Demo
Created on: February 24, 2020
Made with: Pug, Sass, JS
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
14. No Time To Die Title Sequence
Title lock up animation for the new Bond film, "No Time To Die". Hand rolled SVGs animated with GSAP. Each row has a separate time counter to make sequencing more simple to handle. Every part of each letter has it's own to make transform calculations easier also, as all transformations a...Read More
Author: Nick Watton (2Mogs)
Links: Source Code / Demo
Created on: February 18, 2020
Made with: HTML, SCSS, JS
Tags: javascript, animation, svg, bond, 007
15. Canvas Texture
Author: Orville Chomer (orvilleChomer)
Links: Source Code / Demo
Created on: February 11, 2020
Made with: HTML, CSS, JS
Tags: cpc-texture, codepenchallenge
16. Staggered Blink Text Menu
Based on my pen https://codepen.io/alphardex/pen/wvBeXjd More fun with staggering.
Author: alphardex (alphardex)
Links: Source Code / Demo, Codepen.io
Created on: January 28, 2020
Made with: HTML, SCSS, TypeScript
Tags: menu, hover, text, staggered
17. Stretch Typo
I created this Stretch Typo Effect, with mobile support, to experiment with different mix-blend-modes in CSS while having a masked galaxy photo in the background. Move your mouse or drag your finger to stretch the typo and stop the animation. Click the black banner or your right/left arr...Read More
Author: ilithya (ilithya)
Links: Source Code / Demo
Created on: January 27, 2020
Made with: Pug, SCSS, Babel
CSS Pre-processor: SCSS
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: javascript, css, typography, cssvariables, animation
18. VIBES
Author: Sikriti Dakua (dev_loop)
Links: Source Code / Demo, Dribbble Shot
Created on: January 26, 2020
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
19. Bricks
Author: Cassie Evans (cassie-codes)
Links: Source Code / Demo
Created on: January 22, 2020
Made with: HTML, CSS, JS
20. EXTENDED
No reason!
Author: Chris Gannon (chrisgannon)
Links: Source Code / Demo
Created on: January 17, 2020
Made with: HTML, CSS, JS
Tags: svg, typography, extend, stretch, animation
21. Typing Effect Using Javascript
This is a part of my #30Days30Projects challenge. the text is taken from Google's careers website.
Author: Ishaan Sheikh (sheikh_ishaan)
Links: Source Code / Demo
Created on: January 4, 2020
Made with: HTML, SCSS, JS
Tags: 30days30projects, typing-effect, javascript, generators, html
22. Blast Text
Author: Bennett Feely (bennettfeely)
Links: Source Code / Demo
Created on: December 30, 2019
Made with: HTML, SCSS, JS
23. Animated SVG Signature
A demo for animating SVG signature or autograph.
Author: Silvestar Bistrović (CiTA)
Links: Source Code / Demo
Created on: December 20, 2019
Made with: HTML, SCSS, Babel
Tags: svg, css, javascript, animation
24. Hover Alpha Effect
Lately, I've seen a lot of alpha opacity text effects on the TV, web, and even on print, that I decided to make my own version. I created this Hover Alpha Effect with mobile support. Move your mouse or drag your finger to change the alpha opacity color of the text, and to see 3 colorful ...Read More
Author: ilithya (ilithya)
Links: Source Code / Demo
Created on: December 4, 2019
Made with: Pug, SCSS, Babel
CSS Pre-processor: SCSS
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: typography, responsive, javascript, hover, cssvariables
25. Particle Text
Particle Text Canvas pixel manipulation using typed arrays Particles react to mouse movement
Author: Sean Free (seanfree)
Links: Source Code / Demo
Created on: November 24, 2019
Made with: SCSS, Babel
Tags: canvas, arraybuffer, particles
26. Staggered Glow In Text
Author: alphardex (alphardex)
Links: Source Code / Demo
Created on: November 2, 2019
Made with: HTML, SCSS, TypeScript
Tags: text, glow, staggered
27. Text Along Path Svg
Author: Fabio Ottaviani (supah)
Links: Source Code / Demo
Created on: October 17, 2019
Made with: HTML, SCSS, Babel
28. GSAP 3 & ETC Variable Font Caterpillar
Anybody is an awesome variable font by ETC! Check it out here https://www.etc.supply/fonts/anybody/
Author: Pete Barr (petebarr)
Links: Source Code / Demo, Www.etc.supply
Created on: September 28, 2019
Made with: HTML, SCSS, JS
Tags: gsap, gsap 3, greensock, variable font, animation
29. Selfie Crawl
https://www.nytimes.com/interactive/2019/07/22/us/politics/elizabeth-warren-selfies.html?action=click&module=Top%20Stories&pgtype=Homepage
Author: Chris Coyier (chriscoyier)
Links: Source Code / Demo, Www.nytimes.com
Created on: July 24, 2019
Made with: HTML, SCSS, JS
30. Flexible, Full-Width, “Justified” Text Blocks
Thanks to CSS Flexbox and JavaScript, this pen stretches each line of a block quote the full width of its container and resizes the font accordingly. CSS Grid allows for placing end-of-line punctuation next to lines without interrupting the visual quadrangle made by the letters.
Author: Reuben L. Lillie (reubenlillie)
Links: Source Code / Demo
Created on: April 25, 2019
Made with: HTML, CSS, JS
Tags: flexbox, grid, viewport-units, vanilla-javascript, implicit web design
31. Text Scramble Effect
A little text decoding / scramble effect
Author: Justin Windle (soulwire)
Links: Source Code / Demo
Created on: July 6, 2016
Made with: HTML, Stylus, Babel
Tags: javascript, text-effect, effect, scramble, decode
32. TextyleFLIP.js - Flip Text Effect - V2.0
Author: mycreatesite (mycreatesite)
Links: Source Code / Demo
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
33. LOVE Text Effect
Scrambled text effect inspired by the award winning Science Fiction film LOVE http://uk.imdb.com/title/tt1541874/. Ported from a JavaScript jQuery plugin that @soulwire created on jsdo.it at the end of last year after we had just watched the film http://jsdo.it/soulwire/love-text-fx
Author: Matthew Wagerfield (wagerfield)
Links: Source Code / Demo
Created on: November 23, 2012
Made with: HTML, Sass, CoffeeScript
Tags: text, effect, love, scramble
34. Haikyuu Variable Font
Mandy's custom Haikyuu Variable Font.
Author: Mandy Michael (mandymichael)
Links: Source Code / Demo
Created on: August 17, 2020
Made with: HTML, SCSS, JS
Tags: variablefonts, css, haikyuu, fonts, texteffects
35. Variable Font Splitting Js Demo With Device Motion!
Using the device motion api to adjust the width & slant axis on horizontal tilt with splitting.js to animate characters. Enjoy. Because of limitations with iframes and ios device motion api you need to view this in debug mode on ios https://s.codepen.io/mandymichael/debug/9bf7ddbcdd4d1b7d...Read More
Author: Mandy Michael (mandymichael)
Links: Source Code / Demo
Created on: September 18, 2018
Made with: HTML, SCSS, JS
Tags: variable fonts, device motion, splitting.js, css custom properties
36. CSS Only Variable Font Demo Using Decovar Regular
Variable font test with text-shadow animation using Decovar Regular https://github.com/TypeNetwork/fb-Decovar
Author: Mandy Michael (mandymichael)
Links: Source Code / Demo
Created on: January 7, 2018
Made with: HTML, SCSS, JS
Tags: variable fonts, text-effects, text-shadow, css
37. Growing Grassy Text With Variable Fonts.
Grass text effect with variable fonts! Using Decovar: https://github.com/TypeNetwork/fb-Decovar Seriously all the hard work is done by the font designer, so super props to them! Thanks to: David Berlow https://twitter.com/dberlow Font Bureau https://twitter.com/dberlow?lang=en
Author: Mandy Michael (mandymichael)
Links: Source Code / Demo
Created on: January 10, 2018
Made with: HTML, SCSS, JS
Tags: grass, text-effects, background-clip, variable fonts
38. Spotlight Reveal Secret Message Effect
Attempt at revealing text effect with mouse follow JS.
Author: Mandy Michael (mandymichael)
Links: Source Code / Demo
Created on: January 3, 2018
Made with: HTML, SCSS, JS
Tags: text-effect, blend-modes, reveal, spotlight, secret
39. Trippy Variable Font Example Text Effect
First test run at playing with variable fonts and creating text effects. No idea what this works on!
Author: Mandy Michael (mandymichael)
Links: Source Code / Demo
Created on: November 20, 2017
Made with: HTML, SCSS, JS
Tags: variable fonts, css, text-effects, layered text
40. Layered Flourish Fonts. [BROKEN]
CSS text effects with layered fonts. Using the font Elise by Context (http://www.myfonts.com/fonts/context/elise/) The layers didn't quite match up so i had to offset which means that it's not quite perfect for using on the web for editable text, but still usable if you have set text tha...Read More
Author: Mandy Michael (mandymichael)
Links: Source Code / Demo
Created on: April 29, 2017
Made with: HTML, SCSS, JS
Tags: text-effects, css, layered fonts, flourish
41. CodePen Home Bended Text Effect
Attempt at a bending text effect using clip-path so will not work in IE. This pen was made using specifically for a demo I was making to provide some creative ways you can use clip-path, and pseudo elements with text effects. You can see my other experiments here: http://codepen.io/coll...Read More
Author: Mandy Michael (mandymichael)
Links: Source Code / Demo
Made with: HTML, SCSS, JS
42. Strato Layered Font
CSS text effects with layered fonts. Using the font Strato by Sophie Brown. (https://www.thedesignersfoundry.com/products/strato#product-wrap) Check out some other cool text effects: http://codepen.io/collection/DamKJW/
Author: Mandy Michael (mandymichael)
Links: Source Code / Demo
Created on: June 3, 2017
Made with: HTML, SCSS, JS
Tags: css, text-effects, layered, circus, text-shadow
More Awesome Lists:
Share: