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

Welcome to our collection of jQuery code examples! In this carefully curated compilation, we have gathered a wide array of code snippets that demonstrate the power and versatility of the jQuery library.

Not Waving But Drowning

Author:
Hannah Morgan | November 5, 2021
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
gsap.js

Mouse Move Animated Inset text-shadow

Author:
Kevin Lemarchand | March 13, 2021
Made with:
HTML / CSS (SCSS) / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
CSS Animated Text Cut Off Effect

CSS Animated Text Cut Off Effect

Author:
Andrew Sims | March 6, 2021
Made with:
HTML / CSS (SCSS) / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

It's an Illusion

Author:
Jackie Zen | September 29, 2020
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
jquery.lettering.js
Text Effect - Punk Rock

Text Effect - Punk Rock

Author:
Yuhomyan | August 28, 2020
Made with:
HTML / CSS / JS

About a code

Collection of cool CSS text effect!

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Hello World - Shuffle Effect

Author:
Raymond | March 24, 2020
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Pulsing 3D Typography Thingy

Author:
Pete Barr | December 7, 2018
Made with:
HTML / CSS (SCSS) / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
tweenmax.js

Mask Animation with GSAP & SVG

Author:
Martí Fenosa | October 8, 2018
Made with:
HTML / CSS (SCSS) / JS

About a code

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

Customizable Text Animation

Author:
Van Huynh | September 19, 2017
Made with:
HTML / CSS (SCSS) / JS

About a code

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

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Focus Text Hover Effect

Author:
Cameron Fitzwilliam | June 13, 2017
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Splitted Text Reveal

Author:
Fabio Ottaviani | May 30, 2017
Made with:
HTML / CSS (SCSS) / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

jQuery Break/Animate Warping Text Paragraph

Author:
James | January 2, 2017
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Kinetic Type with Greensock

Author:
Nerdmanship | October 9, 2016
Made with:
HTML (Pug) / CSS (SCSS) / JS

About a code

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

Glitched Text

Author:
Derek Palladino | October 7, 2016
Made with:
HTML / CSS (SCSS) / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Animating SVG Text

Author:
Fabio Ottaviani | September 20, 2016
Made with:
HTML / CSS (SCSS) / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Transmission: Glowing Text Animation

Author:
Stephen Scaff | June 25, 2016
Made with:
HTML / CSS (SCSS) / JS

About a code

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

Bubbling Text Effect

Author:
html5andblog | April 30, 2016
Made with:
HTML / CSS / JS

About a code

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

Shattering Text Animation

Author:
Arsen Zbidniakov | September 17, 2015
Made with:
HTML / CSS (SCSS) / JS

About a code

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

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
tweenmax.js

Colorful Text Animation

Author:
Hendry Sadrak | June 22, 2015
Made with:
HTML / CSS (SCSS) / JS

About a code

Fluid and configurable colorful text animation module made with SCSS.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Text Typing Thingamy

Author:
Jack Armley | May 22, 2015
Made with:
HTML (Pug) / CSS (SCSS) / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

CSS Text Stroke

Author:
Ignacio Correia | April 11, 2015
Made with:
HTML (Pug) / CSS (Less) / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
tweenmax.js

Text-Mask Background Moving on MouseMove

Author:
Robert Borghesi | September 12, 2014
Made with:
HTML / CSS (SCSS) / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Typing Text with JavaScript

Author:
Max | May 19, 2014
Made with:
HTML (Haml) / CSS (SCSS) / JS (CoffeeScript)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
CSS Text Shadow

CSS Text Shadow

Author:
Chris Eisenbraun | January 27, 2014
Made with:
HTML / CSS / JS

About a code

Advanced typographic techniques using lettering.js

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
jquery.lettering.js

3D Text Effect - Mousemove

Author:
Dennis Garrn | July 12, 2013
Made with:
HTML / CSS / JS

About a code

Nice 3D text effect with jQuery mousemove.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

LOVE Text Effect

Author:
Matthew Wagerfield | November 23, 2012
Made with:
HTML / CSS (Sass) / JS (CoffeeScript)

About a code

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

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Discover Our Extensive Snippet Library

This heading suggests that your website provides a wide variety of snippets across different technologies, encouraging users to explore and use these resources for their development projects.

HTML Snippets.

Explore a collection of HTML snippets designed to streamline your web development process. From basic structures to complex elements.

CSS Snippets.

Discover powerful CSS snippets that help you style your web pages with ease. Whether you need layout solutions, animations

JavaScript Snippets.

Enhance your website's interactivity with our JavaScript snippets. From DOM manipulation to advanced algorithms

Bootstrap Snippets.

Leverage the power of Bootstrap with our collection of snippets. Quickly integrate responsive design components

Tailwind Snippets.

Speed up your development process with Tailwind CSS snippets. These utility-first CSS snippets enable you to

jQuery Snippets.

Simplify your JavaScript development with jQuery snippets. Easily perform common tasks like event handling, animations

React Snippets.

Build robust, component-based user interfaces with our React snippets. From state management to lifecycle methods,

Vue Snippets.

Streamline Vue.js development with our collection of snippets for creating components, managing state, and handling events.

Ready to set your Brand ablaze?

Let's craft a visual identity that ignites passion and loyalty. ✨