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 fun setEnum(block: DesignBlock, property: String, value: String) 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.

val text = engine.block.create(DesignBlockType.Text)
val textAnimation = engine.block.createAnimation(AnimationType.Baseline)
engine.block.setInAnimation(text, textAnimation)
engine.block.appendChild(page, text)
engine.block.setPositionX(text, 100F)
engine.block.setPositionY(text, 100F)
engine.block.setWidthMode(text, SizeMode.AUTO)
engine.block.setHeightMode(text, SizeMode.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.

val text2 = engine.block.create(DesignBlockType.Text)
val textAnimation2 = engine.block.createAnimation(AnimationType.Pan)
engine.block.setInAnimation(text2, textAnimation2)
engine.block.appendChild(page, text2)
engine.block.setPositionX(text2, 100F)
engine.block.setPositionY(text2, 500F)
engine.block.setWidth(text2, 500F)
engine.block.setHeightMode(text2, SizeMode.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.4F)
engine.block.setDuration(textAnimation2, 1.0)
engine.block.setEnum(textAnimation2, "animationEasing", "EaseOut")

Full Code

Here’s the full code:

import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.Dispatchers
import kotlinx.coroutines.launch
import ly.img.engine.AnimationType
import ly.img.engine.DesignBlockType
import ly.img.engine.Engine
import ly.img.engine.FillType
import ly.img.engine.ShapeType
import ly.img.engine.SizeMode


fun usingAnimations(
    license: String,
    userId: String,
) = CoroutineScope(Dispatchers.Main).launch {
    val engine = Engine.getInstance(id = "ly.img.engine.example")
    engine.start(license = license, userId = userId)
    engine.bindOffscreen(width = 1080, height = 1920)


    val scene = engine.scene.createForVideo()


    val page = engine.block.create(DesignBlockType.Page)
    engine.block.setWidth(page, value = 800F)
    engine.block.setHeight(page, value = 600F)
    engine.block.appendChild(parent = scene, child = page)


    engine.scene.zoomToBlock(
        page,
        paddingLeft = 40F,
        paddingTop = 40F,
        paddingRight = 40F,
        paddingBottom = 40F,
    )


    val text = engine.block.create(DesignBlockType.Text)
    val textAnimation = engine.block.createAnimation(AnimationType.Baseline)
    engine.block.setInAnimation(text, textAnimation)
    engine.block.appendChild(page, text)
    engine.block.setPositionX(text, 100F)
    engine.block.setPositionY(text, 100F)
    engine.block.setWidthMode(text, SizeMode.AUTO)
    engine.block.setHeightMode(text, SizeMode.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")


    val text2 = engine.block.create(DesignBlockType.Text)
    val textAnimation2 = engine.block.createAnimation(AnimationType.Pan)
    engine.block.setInAnimation(text2, textAnimation2)
    engine.block.appendChild(page, text2)
    engine.block.setPositionX(text2, 100F)
    engine.block.setPositionY(text2, 500F)
    engine.block.setWidth(text2, 500F)
    engine.block.setHeightMode(text2, SizeMode.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.4F)
    engine.block.setDuration(textAnimation2, 1.0)
    engine.block.setEnum(textAnimation2, "animationEasing", "EaseOut")


    engine.stop()
}