HTML template

Custom HTML templates can be used on the lines, words, and chars properties, which then serve as wrappers for all split elements.

The HTML template must contain at least one '{value}' variable that will be replaced by the split value. Similarly, the '{i}' variable can be used and will be replaced by the current split index.

All the necessary styles, like 'display: inline-block;', will be applied automatically and don't need to be defined in the template.

For example, if you pass the following template to the char parameter like this:

text.split('p', { chars: '<em class="char-{i}">{value}</em>' });

The split output will be:

<p>
  <em class="char-0" style="display: inline-block;">H</em>
  <em class="char-1" style="display: inline-block;">E</em>
  <em class="char-2" style="display: inline-block;">L</em>
  <em class="char-3" style="display: inline-block;">L</em>
  <em class="char-4" style="display: inline-block;">O</em>
</p>

Accepts

A String containing at least one reference to '{value}'

HTML template code example

import { createTimeline, stagger, text } from 'animejs';

text.split('p', {
  chars: `<span class="char-3d word-{i}">
    <em class="face face-top">{value}</em>
    <em class="face-front">{value}</em>
    <em class="face face-bottom">{value}</em>
  </span>`,
});

const charsStagger = stagger(100, { start: 0 });

createTimeline({ defaults: { ease: 'linear', loop: true, duration: 750 }})
.add('.char-3d', { rotateX: -90 }, charsStagger)
.add('.char-3d .face-top', { opacity: [.5, 0] }, charsStagger)
.add('.char-3d .face-front', { opacity: [1, .5] }, charsStagger)
.add('.char-3d .face-bottom', { opacity: [.5, 1] }, charsStagger);

<div class="large centered row">
  <p class="text-xl">Custom HTML template.</p>
</div>

.char-3d {
  position: relative;
  transform-style: preserve-3d;
  transform-origin: 50% 50% 1rem;
}

.face {
  position: absolute;
  left: 0;
}

.face-bottom {
  top: 100%;
  transform-origin: 50% 0%;
  transform: rotateX(90deg);
}

.face-top {
  bottom: 100%;
  transform-origin: 50% 100%;
  transform: rotateX(-90deg);
}

Previous Next