Customizable and lightweight text content looper based on CSS animations.
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
src
test
.editorconfig
.gitignore
.jshintrc
LICENSE.MD
README.md
bower.json
gulpfile.js
index.html
package.json
yarn.lock

README.md

Whaaaaat?

  • A very customizable and lightweight (1.35kB gzipped) text content looper based on CSS animations.
  • This script uses @keyframe animations. That said, I highly recommend using Animate.css.

Sample/Demo

How to use

Using html attributes

To loop an element's text, just set a data-textlooper attribute on the desired element and call the TextLooper.seek() method somewhere on your code.

Attributes

  • data-textlooper (mandatory)

    • Use data-textlooper with a single interval to specify a delay between all elements
    • Use data-textlooper with intervals separated by '|' to specify each delay
  • data-textlooper-separator (optional)

    • Changes the default separator ,
  • data-textlooper-in (optional)

    • Use data-textlooper-in with a single animation name to specify the 'in'/'intro' animation to all elements
    • Use data-textlooper-in with animation names separated by '|' to specify each element's 'in'/'intro' animation
    • Defaults to fadeIn if defined without values
  • data-textlooper-out (optional)

    • Use data-textlooper-out with a single animation name to specify the 'out'/'outro' animation to all elements
    • Use data-textlooper-out with animation names separated by '|' to specify each element's 'out'/'outro' animation
    • Defaults to fadeOut if defined without values
  • data-textlooper-comeback (optional)

    • Set the data-textlooper-comeback attribute if it's desired to also run the inverted animations before changing to the next phrase.
    • Will be ignore if defined together with data-textlooper-out

Using javascript

It is possible to start looping a text node just by passing it as a parameter to a new instance of a TextLooper object.

Example:

new TextLooper(node, {
  phrases: ['Array','of','phrases','to','loop']
  ins: ['slideInUp'],
  outs: ['slideOut'],
  delays: [1000,1000,2000,3000,3000],
  comebackAsOut: false
}).start();
Attribute Name Description
phrases Array: phrases to loop through
ins String: a single in-animation for all iterations.
Array: customizable in-animations for each iteration.
outs String: a single out-animation for all iterations.
Array: customizable out-animations for each iteration.
delays Integer: a single delay interval for all iterations.
Array: customizable delay intervals for each iteration.
comebackAsOut A boolean defining if the out-animation should be the respective reversed in-animation.

Observations

Visibility

LoopText sets 'visibility: visible' when it starts looping. This way you can hide your phrases before the script runs with a 'visibility: hidden' statement.

Delay interval behaviour

For text-lopping WITHOUT comeback/out animations the delay interval starts counting AFTER the current animation has ended.

For text-looping WITH comeback/out animations the delay interval starts AFTER the first iteration of an animation but not after its comeback/out animations.

Missing list items

Each missing animation/delay item will be replaced with the first one of its list.

Example:

<span data-textlooper="700|1000|500" data-textlooper-in="pulse|fadeIn|swing">
  Multiple, animations, on, this, one
</span>

There are 5 different text elements and only three in-animations/delay items. The two missing items will be replaced by, respectively, '700' and 'pulse'.

Examples

Live examples

<!-- Default animation (fadeIn), default delay (1500), default separator  -->
<span data-textlooper>
	Default, Phrase 1, Phrase 2, Phrase 3
</span>

<!-- Same animation as above but with its comeback animations -->
<span data-textlooper data-textlooper-comeback>
	Default, Phrase 1, Phrase 2, Phrase 3
</span>

<!-- Same animation as above but with default out animation (fadeOut -->
<span data-textlooper data-textlooper-out>
	Default, Phrase 1, Phrase 2, Phrase 3
</span>

<!-- Default animation (fadeIn), default delay (1500), default separator  -->
<span data-textlooper>
	Default, Phrase 1, Phrase 2, Phrase 3
</span>

<!-- Default animation (fadeIn), default delay (1500), custom separator  -->
<span data-textlooper data-textlooper-separator="|">
	Let's, Change | The, Separator | He he
</span>

<!-- Default animation (fadeIn), one delay (1000), custom separator  -->
<span data-textlooper="1000" data-textlooper-separator="|">
	This | will | wait | one | second
</span>

<!-- Default animation (fadeIn), multiple delays -->
<span data-textlooper="500|500|500|500|1000">
	Multiple, delays, one, default, animation
</span>

<!-- Default delay (1500), one animation (bounceIn -->
<span data-textlooper data-textlooper-in="bounceIn">
	Default, delay, one, custom, animation
</span>

<!-- Default delay (1500), multiple animations -->
<span data-textlooper data-textlooper-in="pulse|fadeIn|swing|fadeOut|bounceIn">
	Multiple, animations, one, default, delay
</span>

<!-- One delay (1000), multiple animations -->
<span data-textlooper="1000" data-textlooper-in="pulse|fadeIn|swing|slideInLeft">
	Multiple, animations, one, delay
</span>

<!-- Multiple animations, multiple delays -->
<span data-textlooper="500|500|500|500|1000" data-textlooper-in="pulse|fadeIn|swing|slideInUp">
	Multiple, animations, on, this, one
</span>

<!-- Multiple animations, multiple delays with comebacks -->
<span data-textlooper="500|500|500|500|1000" data-textlooper-in="pulse|fadeIn|swing|slideInUp" data-textlooper-comeback>
	Multiple, animations, on, this, one
</span>

Methods

var node = document.createElement('span'), tl;

// Creates a new instance and parses the node's attributes
tl = new TextLooper(node);

// Creates a new instance and skips the parsing step
tl = new TextLooper(node, {
  phrases: ['Phrase 1','Phrase 2'],
  ins: 'fadeIn',
  comebackAsOut: true
});

// Starts looping
tl.start();

// Gets an instance attributes (phrases, animations, delays and separator)
tl.getAttributes();
Static
// Look for (new) textLoopable elements
TextLooper.seek();

// Overrides default values
TextLooper.setDefaults({
  delay: 1500,
  in: 'fadeIn',
  out: 'fadeOut',
  selector: 'data-textlooper',
  separator: ','
});

// Gets TextLooper default values
TextLooper.getDefaults();

Compatibility

IE 10, Webkit 4.0, Firefox 16, Opera 15

Bonus credits

  • Vitor Paladini for naming the data-textlooper-comeback attribute. (It was really hard to come up with a name for it and he mockingly requested for credits, so here we are).