Skip to content

Text Animations

When applied to text blocks, some animations allow you to control whether the animation should be applied to the entire text at once, line by line, word by word or character by character.

We can use the setEnum(id: number, value: number): void API in order to change the text writing style. Call engine.block.getEnumValues('textAnimationWritingStyle') in order to get a list of currently supported text writing style options. The default writing style is Line.

In this example, we set the easing to Word so that the text animates in one word at a time.

const text = engine.block.create('text');
const textAnimation = engine.block.createAnimation('baseline');
engine.block.setInAnimation(text, textAnimation);
engine.block.appendChild(page, text);
engine.block.setPositionX(text, 100);
engine.block.setPositionY(text, 100);
engine.block.setWidthMode(text, 'Auto');
engine.block.setHeightMode(text, 'Auto');
engine.block.replaceText(
  text,
  'You can animate text\nline by line,\nword by word,\nor character by character\nwith CE.SDK',
);
engine.block.setEnum(textAnimation, 'textAnimationWritingStyle', 'Word');
engine.block.setDuration(textAnimation, 2.0);
engine.block.setEnum(textAnimation, 'animationEasing', 'EaseOut');

Together with the writing style, you can also configure the overlap between the individual segments of a text animation using the textAnimationOverlap property.

With an overlap value of 0, the next segment only starts its animation once the previous segment’s animation has finished. With an overlap value of 1, all segments animate at the same time.

const text2 = engine.block.create('text');
const textAnimation2 = engine.block.createAnimation('pan');
engine.block.setInAnimation(text2, textAnimation2);
engine.block.appendChild(page, text2);
engine.block.setPositionX(text2, 100);
engine.block.setPositionY(text2, 500);
engine.block.setWidth(text2, 500);
engine.block.setHeightMode(text2, 'Auto');
engine.block.replaceText(
  text2,
  'You can use the textAnimationOverlap property to control the overlap between text animation segments.',
);
engine.block.setFloat(textAnimation2, 'textAnimationOverlap', 0.4);
engine.block.setDuration(textAnimation2, 1.0);
engine.block.setEnum(textAnimation2, 'animationEasing', 'EaseOut');

Full Code

Here’s the full code:

import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.51.0/index.js';


const config = {
  license: 'mtLT-_GJwMhE7LDnO8KKEma7qSuzWuDxiKuQcxHKmz3fjaXWY2lT3o3Z2VdL5twm',
  userId: 'guides-user',
  baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.51.0/assets',
};


CreativeEngine.init(config).then(async engine => {
  document.getElementById('cesdk_container').append(engine.element);


  const scene = engine.scene.createVideo();
  const page = engine.block.create('page');
  engine.block.setWidth(page, 1920);
  engine.block.setHeight(page, 1080);
  engine.block.appendChild(scene, page);


  const text = engine.block.create('text');
  const textAnimation = engine.block.createAnimation('baseline');
  engine.block.setInAnimation(text, textAnimation);
  engine.block.appendChild(page, text);
  engine.block.setPositionX(text, 100);
  engine.block.setPositionY(text, 100);
  engine.block.setWidthMode(text, 'Auto');
  engine.block.setHeightMode(text, 'Auto');
  engine.block.replaceText(
    text,
    'You can animate text\nline by line,\nword by word,\nor character by character\nwith CE.SDK',
  );
  engine.block.setEnum(textAnimation, 'textAnimationWritingStyle', 'Word');
  engine.block.setDuration(textAnimation, 2.0);
  engine.block.setEnum(textAnimation, 'animationEasing', 'EaseOut');


  const text2 = engine.block.create('text');
  const textAnimation2 = engine.block.createAnimation('pan');
  engine.block.setInAnimation(text2, textAnimation2);
  engine.block.appendChild(page, text2);
  engine.block.setPositionX(text2, 100);
  engine.block.setPositionY(text2, 500);
  engine.block.setWidth(text2, 500);
  engine.block.setHeightMode(text2, 'Auto');
  engine.block.replaceText(
    text2,
    'You can use the textAnimationOverlap property to control the overlap between text animation segments.',
  );
  engine.block.setFloat(textAnimation2, 'textAnimationOverlap', 0.4);
  engine.block.setDuration(textAnimation2, 1.0);
  engine.block.setEnum(textAnimation2, 'animationEasing', 'EaseOut');


  engine.block.setPlaying(page, true);
  engine.block.setLooping(page, true);
});