w3tweaks.com
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Script
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools
w3tweaks.com
Home Effects

jQuery plugin for CSS3 text animations

June 22, 2020
in Effects

Textillate.js combines some awesome libraries to provide an easy-to-use plugin for applying CSS3 animations to any text.

See the Pen jQuery plugin for CSS3 text animations by Vimalraj (@w3tweaks) on CodePen.

You might also like

24 Free CSS Scroll Effect Examples

36 Free CSS 3D Text Effects

13 Beautiful CSS Button Hover Effects for Your Website

13 Free Blob Effects Using CSS3

CSS in CSS with a lot of C and S

Box Shadow Patterns

Usage

Let’s start with the basic markup:

<h1 class="tlt">My Title</h1>

And your JavaScript should look like this:

$(function () {
	$('.tlt').textillate();
})

This will animate using the default options. To change the defaults, you can either use the html data api:

<h1 class="tlt" data-in-effect="rollIn">Title</h1>

or pass in options on initialization (see full list of options below):

$('.tlt').textillate({ in: { effect: 'rollIn' } });

You can also tell textillate.js to animate a list with the following markup:

<h1 class="tlt">
	<ul class="texts">
		<li data-out-effect="fadeOut" data-out-shuffle="true">Some Title</li>
		<li data-in-effect="fadeIn">Another Title</li>
	</ul>
</h1>
$('.tlt').textillate();

Notice that you can control the animation parameters on each text (<li>) using the data api.

Dependencies

To start using textillate.js, you will need the following:

  • jQuery
  • lettering.js
  • animate.css

Options

$('.tlt').textillate({
  // the default selector to use when detecting multiple texts to animate
  selector: '.texts',

  // enable looping
  loop: false,

  // sets the minimum display time for each text before it is replaced
  minDisplayTime: 2000,

  // sets the initial delay before starting the animation
  // (note that depending on the in effect you may need to manually apply
  // visibility: hidden to the element before running this plugin)
  initialDelay: 0,

  // set whether or not to automatically start animating
  autoStart: true,

  // custom set of 'in' effects. This effects whether or not the
  // character is shown/hidden before or after an animation
  inEffects: [],

  // custom set of 'out' effects
  outEffects: [ 'hinge' ],

  // in animation settings
  in: {
  	// set the effect name
    effect: 'fadeInLeftBig',

    // set the delay factor applied to each consecutive character
    delayScale: 1.5,

    // set the delay between each character
    delay: 50,

    // set to true to animate all the characters at the same time
    sync: false,

    // randomize the character sequence
    // (note that shuffle doesn't make sense with sync = true)
    shuffle: false,

    // reverse the character sequence
    // (note that reverse doesn't make sense with sync = true)
    reverse: false,

    // callback that executes once the animation has finished
    callback: function () {}
  },

  // out animation settings.
  out: {
    effect: 'hinge',
    delayScale: 1.5,
    delay: 50,
    sync: false,
    shuffle: false,
    reverse: false,
    callback: function () {}
  },

  // callback that executes once textillate has finished
  callback: function () {},

  // set the type of token to animate (available types: 'char' and 'word')
  type: 'char'
});

Events

Textillate triggers the following events:

  • start.tlt – triggered when textillate starts
  • inAnimationBegin.tlt – triggered when the in animation begins
  • inAnimationEnd.tlt – triggered when the in animation ends
  • outAnimationBegin.tlt – triggered when the out animation begins
  • outAnimationEnd.tlt – triggered when the out animation ends
  • end.tlt – triggered when textillate ends
$('.tlt').on('inAnimationBegin.tlt', function () {
  // do something
});

Methods

  • $element.textillate('start') – Manually start/restart textillate
  • $element.textillate('stop') – Manually pause/stop textillate
  • $element.textillate('in') – Trigger the current text’s in animation
  • $element.textillate('out') – Trigger the current text’s out animation
Tags: text animationstext effects
Previous Post

14 Best CSS Dark Mode

Next Post

15 CSS Sliders

Related Stories

CSS Scroll Effects
Effects

24 Free CSS Scroll Effect Examples

November 23, 2022
Collection of Free CSS 3D Text Effects
Effects

36 Free CSS 3D Text Effects

November 11, 2022
Beautiful CSS Button Hover Effects
Effects

13 Beautiful CSS Button Hover Effects for Your Website

November 5, 2022
Free Blob Effects Using CSS3
Effects

13 Free Blob Effects Using CSS3

October 31, 2022
CSS in CSS with a lot of C and S
Effects

CSS in CSS with a lot of C and S

October 12, 2020
Box Shadow Patterns
Effects

Box Shadow Patterns

October 1, 2020
Masked & Skewed
Effects

Masked & Skewed

September 30, 2020
Fit Text with CSS Variables
Effects

Fit Text with CSS Variables

September 29, 2020

Discussion about this post

Follow Us

Popular Posts

100 Creative CSS Cards

44 Free Multi step HTML forms

13 Free HTML & CSS Dashboard Template Designs

49 CSS Tables

20 HTML & CSS pricing tables

14 Best CSS Dark Mode

11 CSS Shopping Cart UI/UX

42 Cool CSS Avatars For Better UI

55 Useful handpicked CSS Buttons with examples and demos

89 Best CSS Toggle Switches

w3tweaks

We bring you the best frontend collections that will fix perfect for news, magazine, personal blog, etc. Check our landing page for details.

  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Script
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools