Need help with textillate?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

jschr
3.6K Stars 773 Forks MIT License 83 Commits 70 Opened issues

Description

A jquery plugin for CSS3 text animations.

Services available

!
?

Need anything else?

Contributors list

# 52,224
JavaScr...
css-ani...
jQuery
7 commits
# 47,958
JavaScr...
CSS
canvas
css-ani...
1 commit
# 137,549
magento
PHP
css-ani...
jQuery
1 commit
# 28,199
HTML
iterm2
Apache ...
Sublime...
1 commit
# 138,036
JavaScr...
css-ani...
jQuery
1 commit
# 138,037
JavaScr...
css-ani...
jQuery
1 commit
# 80,800
Bootstr...
HTML
angular...
Shell
1 commit
# 78,725
Objecti...
Swift
mac
IPFS
1 commit
# 90,081
C
PHP
webrtc
jQuery
1 commit
# 33,646
JavaScr...
React
Redux
jQuery
1 commit
# 96,015
PHP
Angular
HTML
seed
1 commit
# 11,797
autohot...
ahk
bitwise...
Nette
1 commit
# 120,590
Swift
nmf
watchos
C++
1 commit

Textillate.js v0.4.1 JS.ORG

See a live demo here.

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

Usage

Let's start with the basic markup:

My Title

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:

Title

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:

  • Some Title
  • Another Title

$('.tlt').textillate();

Notice that you can control the animation parameters on each text (

  • ) using the data api.

    Dependencies

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

    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

    Code Samples

  • We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.