Collection of free jQuery text animation and effect code examples from Codepen and GitHub.

Author

  • Hannah Morgan

Made with

  • HTML / CSS / JS

About a code

Not Waving But Drowning

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

Responsive: yes

Dependencies: gsap.js

Author

  • Kevin Lemarchand

Made with

  • HTML / CSS (SCSS) / JS

About a code

Mouse Move Animated Inset text-shadow

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

Responsive: no

Dependencies: -

Demo image: CSS Animated Text Cut Off Effect

Author

  • Andrew Sims

Made with

  • HTML / CSS (SCSS) / JS

About a code

CSS Animated Text Cut Off Effect

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

Responsive: yes

Dependencies: -

Author

  • Jackie Zen

Made with

  • HTML / CSS / JS

About a code

It's an Illusion

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

Responsive: no

Dependencies: jquery.lettering.js

Demo image: Text Effect - Punk Rock

Author

  • Yuhomyan

Made with

  • HTML / CSS / JS

About a code

Text Effect - Punk Rock

Collection of cool CSS text effect!

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

Responsive: yes

Dependencies: -

Author

  • Raymond

Made with

  • HTML / CSS / JS

About a code

Hello World - Shuffle Effect

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

Responsive: no

Dependencies: -

Author

  • Pete Barr

Made with

  • HTML / CSS (SCSS) / JS

About a code

Pulsing 3D Typography Thingy

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

Responsive: no

Dependencies: tweenmax.js

Author

  • Martí Fenosa

Made with

  • HTML / CSS (SCSS) / JS

About a code

Mask Animation with GSAP & SVG

Three words slider with Greensock, SVG and mask transitions.

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

Responsive: yes

Dependencies: swiper.css, tweenmax.js, swiper.js

Author

  • Van Huynh

Made with

  • HTML / CSS (SCSS) / JS

About a code

Customizable Text Animation

Customizable text animation, appended progressively with jQuery and animated with a CSS keyframe animation.

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

Responsive: no

Dependencies: -

Author

  • Cameron Fitzwilliam

Made with

  • HTML / CSS / JS

About a code

Focus Text Hover Effect

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

Responsive: no

Dependencies: -

Author

  • Fabio Ottaviani

Made with

  • HTML / CSS (SCSS) / JS

About a code

Splitted Text Reveal

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

Responsive: yes

Dependencies: -

Author

  • James

Made with

  • HTML / CSS / JS

About a code

jQuery Break/Animate Warping Text Paragraph

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

Responsive: no

Dependencies: -

Author

  • Nerdmanship

Made with

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

About a code

Kinetic Type with Greensock

Kinetic type is the mix of text and motion. If done right, the reading experience can really come to life with story and emotion. The message is no longer only in the text, but in the imagination of the user.

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

Responsive: no

Dependencies: foundation.css, tweenmax.js

Author

  • Derek Palladino

Made with

  • HTML / CSS (SCSS) / JS

About a code

Glitched Text

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

Responsive: no

Dependencies: -

Author

  • Fabio Ottaviani

Made with

  • HTML / CSS (SCSS) / JS

About a code

Animating SVG Text

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

Responsive: yes

Dependencies: -

Author

  • Stephen Scaff

Made with

  • HTML / CSS (SCSS) / JS

About a code

Transmission: Glowing Text Animation

A little glowing text animation. First, some js to wrap each letter in a span. Then a keyframe animation, with animation-delay mixin, lights up each letter in succession.

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

Responsive: no

Dependencies: -

Author

  • html5andblog

Made with

  • HTML / CSS / JS

About a code

Bubbling Text Effect

A jQuery powered example of how you can create a bubbling effect on a HTML heading. The bubbles appear as though they're coming from behind the text, and then fade out and are removed.

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

Responsive: no

Dependencies: -

Author

  • Arsen Zbidniakov

Made with

  • HTML / CSS (SCSS) / JS

About a code

Shattering Text Animation

GSAP text animation. SVG path shattering. Slow motion on hover.

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

Responsive: yes

Dependencies: tweenmax.js

Author

  • Hendry Sadrak

Made with

  • HTML / CSS (SCSS) / JS

About a code

Colorful Text Animation

Fluid and configurable colorful text animation module made with SCSS.

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

Responsive: no

Dependencies: -

Author

  • Jack Armley

Made with

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

About a code

Text Typing Thingamy

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

Responsive: no

Dependencies: -

Author

  • Ignacio Correia

Made with

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

About a code

CSS Text Stroke

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

Responsive: no

Dependencies: tweenmax.js

Author

  • Robert Borghesi

Made with

  • HTML / CSS (SCSS) / JS

About a code

Text-Mask Background Moving on MouseMove

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

Responsive: no

Dependencies: -

Author

  • Max

Made with

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

About a code

Typing Text with JavaScript

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

Responsive: no

Dependencies: -

Demo image: CSS Text Shadow

Author

  • Chris Eisenbraun

Made with

  • HTML / CSS / JS

About a code

CSS Text Shadow

Advanced typographic techniques using lettering.js

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

Responsive: no

Dependencies: jquery.lettering.js

Author

  • Dennis Garrn

Made with

  • HTML / CSS / JS

About a code

3D Text Effect - Mousemove

Nice 3D text effect with jQuery mousemove.

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

Responsive: no

Dependencies: -

Author

  • Matthew Wagerfield

Made with

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

About a code

LOVE Text Effect

Scrambled text effect inspired by the award winning Science Fiction film LOVE.

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

Responsive: no

Dependencies: -