Skip to main content
TikTok Effect House Platform Logo
Download
Log in
Animation

Animation Sequence

You can use the Animation Sequence component to apply a 2D animation to a material as a texture. You can also render it as an animated image on a 2D screen canvas.

Import Texture Sequence

Import animation assets by clicking + Add asset > Import > Texture Sequence.

Asset requirements

  • Format: .png and .jpg file formats are supported.
  • File frame number (number of files in one Texture Sequence) < 200.
  • For each texture in the Texture Sequence:
    • Resolution limit: The maximum resolution limit is 1024 x 1024 pixels.
    • The single file size is < 1 MB.
  • The total file size is < 200 MB.
Note
Note

See 2D Texture Sequence preparation for a more detailed setup.

Apply Animation Sequence to 2D image

Click + Add object > 2D > Image in the Hierarchy. Doing this will add a 2D canvas to the scene and then put a 2D object under it with an Image component attached.

Select the Image object and add an Animation Sequence component to the Image object by clicking + Add component > Animation > Animation Sequence in the Inspector panel. Set the Texture Sequence to your imported texture sequence.

Congratulations! You have just added an animated image on the 2D canvas.

Apply Animation Sequence on Face Mask

Go to the Hierarchy panel and click + Add object > Face effects > Face Mask to add a Face Mask functional object.

Next, go to the Inspector panel of the Face Mask object. Click + Add component > Animation > Animation Sequence to assign the component to the object.

Navigate to the Animation Sequence component. Set the Texture Sequence to your imported texture sequence. You’ll find that Texture Binding includes None, Base Texture, and Opacity Texture.

You can set the Texture Binding to Base Texture. The effect will look like the following:

You can also make the animation semi-transparent by enabling the Opacity Enable of your Face Mask component. Set the Texture Binding to Opacity Texture. The Face Mask texture will be masked out by the pattern of the animation.

unaligned-image-0
unaligned-image-1

Apply Animation Sequence on a 3D object with Unlit material

Add a 3D sphere with Unlit material

Add a sphere to the Hierarchy panel by clicking + Add object > 3D > Sphere. Add a new unlit material to the Assets panel by clicking + Add asset > Material > Unlit.

This is the simplest built-in material, but you can experiment with other options. Click on Unlit in the Assets panel and check Texture On under Material Property in the Inspector panel. If left unchecked, the material will only render based on the tint color.

Select the sphere in the Hierarchy panel and view the properties in the Inspector panel. Change the Material to your newly imported Unlit Material under the Mesh Renderer component.

Add Animation Sequence component

Click + Add component > Animation > Animation Sequence to assign the component to the object.

Configure Animation Sequence component

Select your texture sequence by clicking on the Texture Sequence field and choosing one that you’ve imported. Lastly, select a Texture Binding. The options that are revealed are usually whatever textures are available for that specific material.

This will also vary based on which material is being used by the Mesh Renderer component. For this guide, we’ll set this to Albedo Texture.

Once fully set up, your sphere should look like this.

unaligned-image-0
unaligned-image-1

Set transparency

If you want your material to be transparent, since this alien animation has transparency, change the Blend Mode of the material by selecting it in the Assets panel and editing the Blend Mode under the Render State 0 property.

unaligned-image-0
unaligned-image-1

Apply Animation Sequence on a 3D object with PBR material

If your 3D object is using a PBR material, after adding an Animation Sequence component, you can set the Texture Binding to Albedo Texture, Normal Texture, MRAO Texture, Emissive Texture, and Ambient Texture.

Note
Note

Make sure you also check the Texture On or Channel On in the Material setting panel that should align with the Texture Binding type you select here.

Albedo Texture

Check the Texture On in the Albedo section of the Material preview panel. Set the Texture Binding to Albedo Texture. It will look like:

unaligned-image-0
unaligned-image-1

Normal Texture

Check the Normal in the Normal section of the Material preview panel. Set the Texture Binding to Normal Texture. It will look like:

unaligned-image-0
unaligned-image-1

MRAO Texture

Check the Texture On in the MRAO section of the Material preview panel. Set the Texture Binding to MRAO Texture. It will look like:

unaligned-image-0
unaligned-image-1

Emissive Texture

Check the Emissive in the Emissive section of the Material preview panel. Also, remember to adjust the Intensity value to see the pattern. Set the Texture Binding to Emissive Texture. It will look like:

unaligned-image-0
unaligned-image-1

Use multiple Animation Sequences

You can add multiple Animation Sequence components to one object if the object has a material with more than one texture property to apply.

In the example, the object uses PBR material, so you can add one Texture Sequence to the Albedo channel of the material, then add another Texture Sequence to the MRAO channel of the material.

unaligned-image-0
unaligned-image-1
Tip
Tip

If the object has multiple materials, the Animation Sequence component will only work for the first material in the list.

Animation Sequence properties

Texture Sequence: Click to open an asset picker window. You will be able to select all Texture Sequence type assets in your current project.

Texture Binding: Click to open a drop-down menu where you can find a list of all the texture types the material is currently using. You can choose one texture type that the Texture Sequence will apply to.

Tip
Tip

If you apply Animation Sequence to an 3D object, based on what materials it is using, make sure you check the Texture On in the Material setting panel that aligns with the Texture Binding type you select.

Play Mode: Choose between the following play modes:

  • Once: Plays the sequence once and stops at the last frame.
  • Loop (default): Plays the sequence in loop.
  • Randomize: Plays the sequence frames randomly.
Tip
Tip

Randomize can be used for animations that are meant to have many options that you want to randomly select from.

  • Ping-Pong: When the sequence gets to the last frame, it will play in reverse.

+ FPS: Adjust the frames per second (FPS) to speed up or slow down the animation. The default value is 12. A higher fps means a smoother animation but more frames, and that probably will affect the performance.

Auto Play: If checked, this animation will play automatically.