Skip to content

Base Animations

CreativeEditor SDK supports many different types of configurable animations for animating the appearance of design blocks in video scenes.

Similarly to blocks, each animation object has a numeric id which can be used to query and modify its properties.

Accessing Animation APIs

In order to query whether a block supports animations, you should call the supportsAnimation(id: number): boolean API.

if (!engine.block.supportsAnimation(graphic)) {
  return;
}
const slideInAnimation = engine.block.createAnimation('slide');
const breathingLoopAnimation = engine.block.createAnimation('breathing_loop');
const fadeOutAnimation = engine.block.createAnimation('fade');

Assigning Animations

In order to assign an In animation to the block, call the setInAnimation(id: number, animation: number): void API.

engine.block.setInAnimation(graphic, slideInAnimation);

In order to assign a Loop animation to the block, call the setLoopAnimation(id: number, animation: number): void API.

engine.block.setLoopAnimation(graphic, breathingLoopAnimation);

In order to assign an Out animation to the block, call the setOutAnimation(id: number, animation: number): void API.

engine.block.setOutAnimation(graphic, fadeOutAnimation);

To query the current animation ids of a design block, call the getInAnimation(id: number): number, getLoopAnimation(id: number): number or getOutAnimation(id: number): number API. You can now pass this id into other APIs in order to query more information about the animation, e.g. its type via the getType(id: number): string API.

const animation = engine.block.getLoopAnimation(graphic);
const animationType = engine.block.getType(animation);

When replacing the animation of a design block, remember to destroy the previous animation object if you don’t intend to use it any further. Animation objects that are not attached to a design block will never be automatically destroyed.

Destroying a design block will also destroy all of its attached animations.

const squeezeLoopAnimation = engine.block.createAnimation('squeeze_loop');
engine.block.destroy(engine.block.getLoopAnimation(graphic));
engine.block.setLoopAnimation(graphic, squeezeLoopAnimation);
/* The following line would also destroy all currently attached animations */
// engine.block.destroy(graphic);

Animation Properties

Just like design blocks, animations with different types have different properties that you can query and modify via the API. Use findAllProperties(id: number): string[] in order to get a list of all properties of a given animation.

For the slide animation in this example, the call would return ['name', 'animation/slide/direction', 'animationEasing', 'includedInExport', 'playback/duration', 'type', 'uuid'].

Please refer to the API docs for a complete list of all available properties for each type of animation.

const allAnimationProperties = engine.block.findAllProperties(slideInAnimation);

Once we know the property keys of an animation, we can use the same APIs as for design blocks in order to modify those properties. For example, we can use setFloat(id: number, property: string, value: number): void in order to change the direction of the slide animation to make our block slide in from the top.

engine.block.setFloat(slideInAnimation, 'animation/slide/direction', 0.5 * Math.PI);

All animations have a duration. For In and Out animations, the duration defines the total length of the animation as described above. For Loop animations, the duration defines the length of each loop cycle.

We can use the setDuration(id: number, value: number): void API in order to change the animation duration.

Note that changing the duration of an In animation will automatically adjust the duration of the Out animation (and vice versa) in order to avoid overlaps between the two animations.

engine.block.setDuration(slideInAnimation, 0.6);

Some animations allow you to configure their easing behavior by choosing from a list of common easing curves. The easing controls the acceleration throughout the animation.

We can use the setEnum(id: number, value: number): void API in order to change the easing curve. Call engine.block.getEnumValues('animationEasing') in order to get a list of currently supported easing options.

In this example, we set the easing to EaseOut so that the animation starts fast and then slows down towards the end. An EaseIn easing would start slow and then speed up, while EaseInOut starts slow, speeds up towards the middle of the animation and then slows down towards the end again.

engine.block.setEnum(slideInAnimation, 'animationEasing', 'EaseOut');
console.log("Available easing options:", engine.block.getEnumValues('animationEasing'));

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);


  engine.editor.setSettingColor('clearColor', { r: 0.2, g: 0.2, b: 0.2, a: 1 });


  const graphic = engine.block.create('graphic');
  const imageFill = engine.block.createFill('image');
  engine.block.setString(
    imageFill,
    'fill/image/imageFileURI',
    'https://cdn.img.ly/assets/v3/ly.img.sticker/images/emoticons/imgly_sticker_emoticons_star.svg',
  );
  engine.block.setFill(graphic, imageFill);
  engine.block.setShape(graphic, engine.block.createShape('rect'));
  engine.block.setWidth(graphic, 500);
  engine.block.setHeight(graphic, 500);
  engine.block.setPositionX(graphic, (1920 - 500) / 2);
  engine.block.setPositionY(graphic, (1080 - 500) / 2);
  engine.block.appendChild(page, graphic);


  engine.scene.zoomToBlock(page, 60, 60, 60, 60);


  if (!engine.block.supportsAnimation(graphic)) {
    return;
  }


  const slideInAnimation = engine.block.createAnimation('slide');
  const breathingLoopAnimation = engine.block.createAnimation('breathing_loop');
  const fadeOutAnimation = engine.block.createAnimation('fade');
  engine.block.setInAnimation(graphic, slideInAnimation);
  engine.block.setLoopAnimation(graphic, breathingLoopAnimation);
  engine.block.setOutAnimation(graphic, fadeOutAnimation);
  const animation = engine.block.getLoopAnimation(graphic);
  const animationType = engine.block.getType(animation);


  const squeezeLoopAnimation = engine.block.createAnimation('squeeze_loop');
  engine.block.destroy(engine.block.getLoopAnimation(graphic));
  engine.block.setLoopAnimation(graphic, squeezeLoopAnimation);
  /* The following line would also destroy all currently attached animations */
  // engine.block.destroy(graphic);


  const allAnimationProperties =
    engine.block.findAllProperties(slideInAnimation);
  engine.block.setFloat(
    slideInAnimation,
    'animation/slide/direction',
    0.5 * Math.PI,
  );
  engine.block.setDuration(slideInAnimation, 0.6);
  engine.block.setEnum(slideInAnimation, 'animationEasing', 'EaseOut');
  console.log(
    'Available easing options:',
    engine.block.getEnumValues('animationEasing'),
  );


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