Collection of free vanilla JavaScript text effect code examples: 3D, circle, animated, responsive, with motion path, with particles, with hover effects.

Related Articles

  1. CSS Text Effects
  2. CSS Text Animation

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

  • Hasani

Made with

  • HTML / CSS / JS

About a code

Black is...

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

Responsive: no

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, customease3.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

  • 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

  • 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 Coyier

Made with

  • HTML / CSS (SCSS) / JS

About a code

Selfie Crawl

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

Responsive: yes

Dependencies: -

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: -