Collection of free vanilla JavaScript text effect code examples: 3D, circle, animated, responsive, with motion path, with particles, with hover effects. Update of May 2020 collection. 45 new items.

Related Articles

  1. CSS Text Effects
  2. CSS Text Animation

Author

  • Anna the Scavenger

Made with

  • HTML / CSS / JS

About a code

Creativity Now

Click anywhere to make new 3D art.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: gsap.js

Author

  • saeed

Made with

  • HTML / CSS / JS

About a code

Glow Sparks Text

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • JennyBKowalski

Made with

  • HTML / CSS / JS

About a code

Interactive Variable Text

Playing with interactive variable type using p5.js with a CSS gradient. Plus a little dose of Bohemian Rhapsody.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: p5.js

Author

  • Mary Lou

Made with

  • HTML / CSS / JS

About a code

Circular SVG Text Animation

Exploring some experimental circular SVG text effects for an intro animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Ricardo Sanprieto

Made with

  • HTML / CSS / JS

About a code

Interactive Particles Text

Interactive particles text create with three.js.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: three.js

Author

  • Cyd Stumpel

Made with

  • HTML / CSS (SCSS) / JS (Babel)

About a code

Solid

Hover over, or tap this title.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: gsap.js

Author

  • P

Made with

  • HTML / CSS (SCSS) / JS

About a code

Repetition Text Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: gsap.js

Author

  • Sikriti Dakua

Made with

  • HTML / CSS (SCSS) / JS

About a code

BOOST

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: gsap.js

Author

  • George Burrell

Made with

  • HTML / CSS (SCSS) / JS

About a code

Text with Background Image GSAP Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: gsap.js

Author

  • Sikriti Dakua

Made with

  • HTML / CSS (SCSS) / JS

About a code

GOOD MOOD

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: gsap.js

Author

  • rafaelcastrocouto

Made with

  • HTML / CSS / JS

About a code

Furry

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Noob

Made with

  • HTML / CSS / JS

About a code

GSAP JS: multiple text-shadow:hover

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js, tweenmax.js

Author

  • @keyframers

Made with

  • HTML / CSS (SCSS) / JS

About a code

Resizable Logo

Flipping multiple elements. Sliding layers. Ruler markers with gradients.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Mattia Astorino

Made with

  • HTML / CSS (PostCSS) / JS

About a code

Mark Text Effect on Scroll with IO

Simple example of how to animate mark style on scrolling, using Intersection Observer.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Sikriti Dakua

Made with

  • HTML / CSS (SCSS) / JS

About a code

BELIEVE IN YOURSELF

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: gsap.js

Author

  • Sikriti Dakua

Made with

  • HTML / CSS (SCSS) / JS

About a code

Heart

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: gsap.js

Author

  • Tanner Dolby

Made with

  • HTML / CSS (SCSS) / JS (Babel)

About a code

Variable Font Animation

Introduction to Google Variable fonts with some GSAP animation sprinkled in to animate letters to and from low/high font-weights.

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: no

Dependencies: gsap.js

Author

  • Sikriti Dakua

Made with

  • HTML / CSS (SCSS) / JS

About a code

WEEKEND

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: gsap.js

Author

  • Sikriti Dakua

Made with

  • HTML / CSS (SCSS) / JS

About a code

PROUD

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: gsap.js

Author

  • Sikriti Dakua

Made with

  • HTML / CSS (SCSS) / JS

About a code

COFFEE FIRST

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: gsap.js

Author

  • Chris Coyier

Made with

  • HTML / CSS (SCSS) / JS

About a code

Rough Notation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Sikriti Dakua

Made with

  • HTML / CSS (SCSS) / JS

About a code

SNOOZE

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: gsap.js

Author

  • P

Made with

  • HTML / CSS / JS

About a code

Black Lives Matter

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Caroline Artz

Made with

  • HTML (Pug) / CSS (SCSS) / JS (Babel)

About a code

GSAP Text Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: gsap.js, lodash.js

Author

  • Annie

Made with

  • HTML / CSS (SCSS) / JS

About a code

Dream Dangerously: Smoky Text on Hover

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Louis Hoebregts

Made with

  • HTML / CSS (SCSS) / JS

About a code

3D Text - Mouse Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: p5.js

Author

  • Sikriti Dakua

Made with

  • HTML / CSS (SCSS) / JS

About a code

LIGHT WORK

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: gsap.js

Author

  • Sikriti Dakua

Made with

  • HTML / CSS (SCSS) / JS

About a code

HELLO

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: gsap.js

Author

  • Alex Trost

Made with

  • HTML (Pug) / CSS / JS (Babel)

About a code

IN TOO DEEP

Playing with perceived depth and neon reflections. Using an isometric angle to start and fading in typography.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: gsap.js

Author

  • @keyframers

Made with

  • HTML / CSS (SCSS) / JS

About a code

Splitting Splash

Bouncy CSS text animation with Splitting.js.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: splitting.css, splitting.js

Author

  • Frank Force

Made with

  • HTML / CSS / JS

About a code

SMASH

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Cojea Gabriel

Made with

  • HTML / CSS / JS

About a code

Rolling Text Hover Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Adam Kuhn

Made with

  • HTML (Haml) / CSS (SCSS) / JS

About a code

Take It Easy

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: splitting.js

Author

  • Jhey

Made with

  • HTML (Pug) / CSS (Stylus) / JS (Babel)

About a code

Responsive Meandering Text with Splitting

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies: meanderer.js, splitting.js

Author

  • Michelle Barker

Made with

  • HTML / CSS (SCSS) / JS

About a code

Motion Path Scaling

Using Resize Observer to scale the element using the path.

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies: splitting.js

Author

  • Miguel

Made with

  • HTML / CSS (Sass) / JS

About a code

Number 8

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Braydon Coyer

Made with

  • HTML / CSS (SCSS) / JS (TypeScript)

About a code

Hello, World!

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: gsap.js

Demo image: 3D Kinetic Typography

Author

  • Anna the Scavenger

Made with

  • HTML / CSS / JS

About a code

3D Kinetic Typography

Move your mouse over to experience magic.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: three.js, kineticmemphis.js, buffergeometryutils.js

Author

  • Luciano Felix

Made with

  • HTML / CSS (Sass) / JS

About a code

Type Promise

Async text typing with promises.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • T.J. Fogarty

Made with

  • HTML / CSS (SCSS) / JS (Babel)

About a code

Particle Effects on Text Selection

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Outlines and overprints

Author

  • Jason Pamental

Made with

  • HTML / CSS / JS

About a code

Outlines and Overprints

An exploration in creating a more graphic headline treatment using overlaps, transparency, and color.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Tom Miller

Made with

  • HTML / CSS / JS

About a code

Showreel Intro Text

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: gsap.sj, splittext3.js

Author

  • ilithya

Made with

  • HTML (Pug) / CSS (SCSS) / JS (Babel)

About a code

Neumorphism Typo

Neumorphism typography experiment with ThreeJS. Use cursor to move around the shiny effect. On mobile touch + drag screen.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: three.js

Author

  • Jhey

Made with

  • HTML (Pug) / CSS (Stylus) / JS (Babel)

About a code

Dismantling Text with GreenSock

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: gsap.js

Author

  • Malik Dellidj

Made with

  • HTML (Pug) / CSS (Sass) / JS

About a code

Cirle Text

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: circletype.js

Author

  • Nick Watton

Made with

  • HTML / CSS (SCSS) / JS

About a code

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 are from the root. This means no need to calculate scale or rotation offsets. Makes the markup more complex, but the animation easier. Complexity has to go somewhere...

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: gsap.js

Demo image: Canvas Texture

Author

  • Orville Chomer

Made with

  • HTML / CSS / JS

About a code

Canvas Texture

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Michelle Barker

Made with

  • HTML / CSS / JS

About a code

Splitting and Motion Path

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: splitting.js

Author

  • alphardex

Made with

  • HTML / CSS (SCSS) / JS (TypeScript)

About a code

Staggered Blink Text

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • ilithya

Made with

  • HTML (Pug) / CSS (SCSS) / JS (Babel)

About a code

Stretch Typo

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 arrow keys to switch the CSS mix-blend-mode, and experience the different effects with the masked galaxy photo. Headline is editable, so place your cursor in the text and type anything else you'd like.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: splitting.js

Author

  • Sikriti Dakua

Made with

  • HTML (Pug) / CSS (SCSS) / JS

About a code

Vibes

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Cassie Evans

Made with

  • HTML / CSS / JS

About a code

Bricks

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: gsap.js, splittext3.js

Author

  • Chris Gannon

Made with

  • HTML / CSS / JS

About a code

EXTENDED

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: gsap.js, scrubgsaptimeline.js, motionpathplugin.js, motionpathhelper.js, drawsvgplugin3.js, morphsvgplugin3.js, customease3.js, customwiggle3.js

Author

  • Ishaan Sheikh

Made with

  • HTML / CSS (SCSS) / JS

About a code

Typing Effect Using JavaScript

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Caroline Artz

Made with

  • HTML (Pug) / CSS (SCSS) / JS (Babel)

About a code

Spotlight Cursor Text Screen

Using CSS screen blend mode and GSAP to create the cursor and text effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: gsap.js

Author

  • Bennett Feely

Made with

  • HTML / CSS (SCSS) / JS

About a code

Blast Text

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Silvestar Bistrović

Made with

  • HTML / CSS (SCSS) / JS (Babel)

About a code

Animated SVG Signature

A demo for animating SVG signature or autograph.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Hover Alpha Effect

Author

  • ilithya

Made with

  • HTML (Pug) / CSS (SCSS) / JS (Babel)

About a code

Hover Alpha Effect

Move your mouse or drag your finger to change the alpha opacity color of the text, and to see 3 colorful text-shadow effects. The headline is editable, so place your cursor in the text and type anything else you'd like.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Particle Text

Author

  • Sean Free

Made with

  • HTML / CSS (SCSS) / JS (Babel)

About a code

Particle Text

Canvas pixel manipulation using typed arrays. Particles react to mouse movement.

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • alphardex

Made with

  • HTML / CSS (SCSS) / JS (TypeScript)

About a code

Staggered Glow In Text

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Fabio Ottaviani

Made with

  • HTML / CSS (SCSS) / JS (Babel)

About a code

Text Along Path SVG

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: tweenmax.js

Author

  • Pete Barr

Made with

  • HTML / CSS (SCSS) / JS

About a code

GSAP 3 & ETC Variable Font Caterpillar

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: gsap.js, splittext3.js

Author

  • Chris Gannon

Made with

  • HTML / CSS / JS

About a code

Play Hard

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: tweenmax.js

Author

  • Chris Coyier

Made with

  • HTML / CSS (SCSS) / JS

About a code

Selfie Crawl

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Vadym

Made with

  • HTML / CSS (SCSS) / JS (Babel)

About a code

Perspective Hover Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: tweenmax.js

Demo image: Flexible, Full-Width, Justified Text Blocks

Author

  • Reuben L. Lillie

Made with

  • HTML / CSS / JS

About a code

Flexible, Full-Width, Justified Text Blocks

Thanks to CSS Flexbox and JavaScript, this example 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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Primary Colors Isometric Text

Author

  • Yoav Kadosh

Made with

  • HTML / CSS (SCSS) / JS (Babel)

About a code

Primary Colors Isometric Text

3D isometric text made using a bit of JavaScript and CSS custom properties. The text is both selectable and indexable by search engines.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Genevieve

Made with

  • HTML / CSS (SCSS) / JS (Babel)

About a code

Blended Text Layers

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Will King

Made with

  • HTML / CSS (SCSS) / JS (Babel)

About a code

Multiline Underline with Any Color

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Bình Cao

Made with

  • HTML / CSS (SCSS) / JS

About a code

Untitled

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Justin Windle

Made with

  • HTML / CSS (Stylus) / JS (Babel)

About a code

Text Scramble Effect

A little text decoding/scramble effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Szenia Zadvornykh

Made with

  • HTML / CSS / JS

About a code

Three.js Text Animation

Fifth in a series of experiments with three.js and type.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: three.js, tweenmax.js

Author

  • Kevin

Made with

  • HTML / CSS (SCSS) / JS (Babel)

About a code

Futuristic Resolving/Typing Text Effect feat. GLaDOS

Futuristic resolving/typing text effect usually found in game or movie cut scenes to reveal text on screen.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -