Animation

You can add animations to elements with natural easing options. Each animation should serve a purpose in your video, whether it’s to draw attention, transition between scenes, or convey information.

​

Properties

​

Usage

Here’s an example of how to create and apply animations to elements:

import BlendDuck, { Text, Animation, AnimationType, AnimationEasing } from "@blendduck/node-sdk";

// Create a text element
const textElement = new Text();
textElement.text = "Animated Text";

// Create a fade-in animation
const fadeIn = new Animation(AnimationType.FadeIn);
fadeIn.startTime = 0;
fadeIn.endTime = 1;
fadeIn.easing = AnimationEasing.Smooth;

// Create a move animation
const move = new Animation(AnimationType.Move);
move.startTime = 1;
move.endTime = 2;
move.easing = AnimationEasing.EaseInOut;

// Add animations to the text element
textElement.addAnimation(fadeIn);
textElement.addAnimation(move);

You can create Clip by JSON directly

const slideIn = new Animation(AnimationType.SlideIn, {
  direction: 'up', // slide direction
  by: 100, // slide distance
})

// or
const animation = Animation.fromJSON({
  type: 'slideIn',
  direction: 'up',
  by: 100
})

You can pass the data parameters while create an animation for Text element:

const appear = new Animation(AnimationType.Appear, {
  data: {
    type: 'Letters', // 'Letters', 'Words' or 'Lines'
    order: 'Forward' // 'Forward' or 'Backward',
    delay: 30, // 30% delay
    smoothing: 'linear', // 'linear', 'easeIn', 'easeOut', 'easeInOut' or 'smooth'
  }
})

const fadeIn = Animation.fromJSON({
  type: 'fadeIn',
  data: {
    type: 'Words'
    order: 'Forward',
    delay: 0
    smoothing: 'easeIn',
  }
})

​

Animation Types

BlendDuck supports various types of animations, including:

​

AnimationType.Move

Change the position of an element.

​

AnimationType.Scale

Adjust the size of an element.

​

AnimationType.Rotate

Rotate an element.

​

AnimationType.Opacity

Change the transparency of an element.

​

AnimationType.Appear

Make an element suddenly appear.

​

AnimationType.FadeIn

Gradually increase the opacity of an element.

​

AnimationType.SlideIn

Slide an element into view.

​

AnimationType.MaskIn

Reveal an element using a mask transition.

​

AnimationType.ShrinkIn

Scale an element from a larger size to its full size.

​

AnimationType.GrowIn

Scale an element from a smaller size to its full size.

• AnimationType.GrowIn: Grow an element into view by increasing its size.

​

AnimationType.Disappear

Make an element suddenly disappear.

​

AnimationType.FadeOut

Gradually decrease the opacity of an element.

​

AnimationType.SlideOut

Slide an element out of view.

​

AnimationType.MaskOut

Hide an element using a mask transition.

​

AnimationType.ShrinkOut

Scale an element out of video to a smaller size.

​

AnimationType.GrowOut

Shrink an element out of view to a larger size.

​

Easing Types

BlendDuck supports various types of easing functions, including:

• AnimationEasing.Smooth: Applies smooth, natural transitions.
• AnimationEasing.Linear: Animates at a constant speed.
• AnimationEasing.EaseIn: Starts the animation slowly and accelerates towards the end.
• AnimationEasing.EaseOut: Begins quickly and slows down towards the end.
• AnimationEasing.EaseInOut: Combines both EaseIn and EaseOut, starting slowly, speeding up, and then slowing down again at the end.
• AnimationEasing.BackIn: Pulls the animation slightly backwards before moving forward, creating an elastic effect at the start.
• AnimationEasing.BackOut: Moves forward and then pulls back slightly at the end, giving a bounce-back effect on completion.
• AnimationEasing.BackInOut: Combines both BackIn and BackOut, with a backward pull at the start and end of the animation.
• AnimationEasing.ElasticOut: Creates a bouncy, spring-like effect at the end of the animation, as if the element snaps into place.
• AnimationEasing.BounceOut: Makes the element bounce as it reaches the end of the animation, mimicking real-world physics.

​

Related Concepts

• Element