Text demo

First, define the controller for your text animations.

In addition to the controller, you will also need to set up a template. (Details on the template configuration will follow.)

IMPORTANT: Make sure to place the text you wish to animate inside the DIV that is controlled by the controller.

The text can either be a raw text node or wrapped inside an HTML element such as a <p> or <span>.

For best results, it is recommended to wrap your text with an element, allowing Easy to handle the disabling.

<div data-controller="easy-text" data-easy-text-template-value="one-blue"><p>Some Text</p></div>

The minimal configuration uses the 'type' mode for typing animations.

Caret and speed

You can remove the caret and adjust the typing speed as needed.

<div
data-controller="easy-text"
data-easy-text-template-value="one-blue"
data-easy-text-caret-value="false"
data-easy-text-speed-value="80"
data-easy-text-delay-value="600"><p>Some Text</p></div>

For example, to increase the typing speed to 80ms per character and decrease the delay between cycles to 600ms, adjust the corresponding settings. The caret can also be disabled as required.

IMPORTANT: When disabling the caret, the layout may shift. To avoid this, assign a constant height to the controller element.

Events

Animations can be started and stopped using JavaScript events.

You can assign custom names to these events to uniquely control the start and stop actions for different text blocks.

<div
data-controller="easy-text"
data-easy-text-template-value="one-blue"
data-easy-text-event-start-value="true"
data-easy-text-event-name-value="textDemoStartEvent"
data-easy-text-stop-event-value="textDemoStopEvent"><p>Some Text</p></div>

const myStartEvent = new CustomEvent('textDemoStartEvent');
const myStopEvent = new CustomEvent('textDemoStopEvent');
setTimeout(() => { document.dispatchEvent(myStartEvent); }, 5000);
setTimeout(() => { document.dispatchEvent(myStopEvent); }, 15000);
                    

For instance, you might start the typing animation after 5 seconds and stop it after 15 seconds.

IMPORTANT: The current animation cycle will always finish before stopping.

Infinite and realistic typing

The animation can be set to run for a single cycle, and "realistic" typing (variable speed) can be turned off, resulting in standard uniform speed.

<div
data-controller="easy-text"
data-easy-text-template-value="one-blue"
data-easy-text-infinite-value="false"
data-easy-text-realistic-typing-value="false"
><p>Some Text</p></div>

Both infinite and single-run cycles are supported. Set infinite to false for a single cycle and to true for ongoing animation. The visual difference between realistic and uniform typing can then be observed.

Styling

You can style the caret and the output buffer using custom CSS classes.

<div
    data-controller="easy-text"
    data-easy-text-template-value="one-blue"
    data-easy-text-classes-value="easy-text-demo-deco-text easy-text-demo-bigger-text"
    data-easy-text-caret-classes-value="easy-text-demo-underline-caret"
><p>Some Text</p></div>

.easy-text-demo-deco-text {
    text-decoration: line-through;
}
.easy-text-demo-bigger-text {
    font-size: 2rem;
}
.easy-text-demo-underline-caret {
    text-decoration: underline;
}
                    

Fill animation

There are three additional animation modes besides typing. For example, the 'fill' animation reveals text in a different style.

<div
    data-controller="easy-text"
    data-easy-text-template-value="one-blue"
    data-easy-text-mode-value="fill"
    data-easy-text-speed-value="2000"
    data-easy-text-delay-value="1500"
><p>Some Text</p></div>

Styling fill animation

Both text and caret color, caret width, and the animation easing function can be customized for 'fill' and 'reveal' modes.

<div
    data-controller="easy-text"
    data-easy-text-template-value="one-blue"
    data-easy-text-mode-value="fill"
    data-easy-text-speed-value="2000"
    data-easy-text-delay-value="1500"
    data-easy-text-color-value="#db1200"
    data-easy-text-caret-color-value="#58db00"
    data-easy-text-caret-width-value="3px"
    data-easy-text-easing-value="cubic-bezier(0.25, 0.1, 0.25, 1)"
><p>Some Text</p></div>

For example, you can set the text color to red, caret color to green, caret width to 3px, and use a cubic easing function.

Reveal animation

This mode is used to reveal texts.

<div
    data-controller="easy-text"
    data-easy-text-template-value="one-blue"
    data-easy-text-mode-value="reveal"
    data-easy-text-speed-value="2000"
    data-easy-text-delay-value="1500"
><p>Some Text</p></div>

Styling reveal animation

Same settings as used by the 'fill' example above.

<div
    data-controller="easy-text"
    data-easy-text-template-value="one-blue"
    data-easy-text-mode-value="reveal"
    data-easy-text-speed-value="2000"
    data-easy-text-delay-value="1500"
    data-easy-text-color-value="#db1200"
    data-easy-text-caret-color-value="#58db00"
    data-easy-text-caret-width-value="3px"
    data-easy-text-easing-value="cubic-bezier(0.25, 0.1, 0.25, 1)"
><p>Some Text</p></div>

For example, you can set the text color to red, caret color to green, caret width to 3px, and use a cubic easing function.

Rotate animation

Multiple texts can be animated in rotation.

Note: This requires at least two text elements within the controller’s DIV.

IMPORTANT: One controller can handle a maximum of 10 text elements.

<div
    data-controller="easy-text"
    data-easy-text-template-value="one-blue"
    data-easy-text-mode-value="rotate"
    data-easy-text-speed-value="2000"
    data-easy-text-delay-value="1500"
><p>First Text</p><p>Second Text</p><p>Third Text</p></div>

Configure rotate animation

The animation’s reverse direction and duration can also be configured as needed.

<div
    data-controller="easy-text"
    data-easy-text-template-value="one-blue"
    data-easy-text-mode-value="rotate"
    data-easy-text-speed-value="2000"
    data-easy-text-delay-value="1500"
    data-easy-text-straight-reverse-value="false"
    data-easy-text-reverse-duration-value="3000"
><p>First Text</p><p>Second Text</p><p>Third Text</p></div>