Breaking changes

Types

• StaggerParameters → StaggerParams

New Features

text.split()

The major new feature of this release is the new text.split() method, an easy to use, fully-featured, lightweight and performant modern text splitter for JavaScript.

It does all the following in only 7KB: - Split text by characters, words, and lines - Split words in languages that don't use spaces like Chinese and Japanese - Can split trough any level of nested tags, even when splitting by lines - Element cloning with configurable position - Custom wrapping methods to create masking effects - Custom HTML wrapper with a powerful templating system - Handles splitting ѕρє¢ιαℓ ¢нαяα¢тєяѕ and emojis - Accessible for screen readers - 100% responsive with the .addEffect() method

Basic Usage

:::javascript
import { text, animate } from 'animejs';

const split = text.split('.my-text');

animate(split.words, {
  x: () => utils.random(-100, 100),
  y: () => utils.random(-100, 100)
});

Check out the full documentation for text.split() here http://animejs.com/documentation/text/split

New Scope methods

scope.addOnce()

Adds a constructor to a Scope that is only called once, allowing you to execute code once and add scoped animations that won't be reverted between media query changes.

scope.keepTime()

Adds a constructor Function that recreates a Timer, Animation, or Timeline between media query changes while keeping track of its current time, allowing to seamlessly update an animation's parameters without breaking the playback state.

Check out the full documentation for text.split() here http://animejs.com/documentation/scope/scope-methods/addonce

New utils methods

utils.keepTime()

Returns a Function that recreates a Timer, Animation, or Timeline while keeping track of its current time, allowing to seamlessly update an animation's parameters without breaking the playback state.

:::js
const trackedAnimate = utils.keepTime(() => animate(target, params));

const tracked = trackedAnimate();

New stagger() settings

use and total parameters

The new use and total parameters allow defining custom staggering order:

:::js
const split = text.split('article', { lines: true });

// Animate the words with a stagger based on the lines order

animate(split.words, {
  y: () => utils.randomPick(['-100%', '100%']),
  delay: stagger(100, {
    use: 'data-line',
    from: 'last',
    total: split.lines.length
  })
})

Random from parameter

You can now define 'random' to thefromparameter of thestagger()`` function to define a random staggered order:

:::js
const split = text.split('article');

animate(split.words, {
  y: () => utils.randomPick(['-100%', '100%']),
  delay: stagger(100, { from: 'random' })
})

Improvements and bug fixes

Animation, Timer, Timeline

• Make sure .refresh() only updates the fromNumbers value when the value is defined as a function based value
• Improves startup performance on first load
• Improves tree shaking

Docs

• Various bug fixes, copy and design tweaks