Skip to main content

Quick start guide

This article contains step by step explanations for the most commonly used operations. At the end of this article, you will get a clear picture of how to create animations from scratch.

Introduction​

In this article we gonna explain how to:

On the next image you will find annotated buttons we will use for this journey.

Add Object​

Object can be added from Add Object Panel.

  • Click on
  • Object panel will appear. It contains built in and installed objects

In this tutorial we will use another way to add Image and Text:

  • Image, Video and Vector Objects can be added from Media Library panel.
  • Text Object can be added from Text panel

Add Image Object​

  • Click on

  • You have two options here. To upload image in the My Images tab panel or to choose image from library. We gonna chose image from library.

  • Click on the Image Library tab and choose image.

  • Click Add Image & Close

    Find a specific image

    To quickly find specific image use Search and Tags.

  • Let's see what we have so far.
    Image is added with default Absolute layout to Layer 1.

Add Text Object​

  • Click on
  • From the Font list select one of the System or Google fonts and select size.
  • Let's see what we have so far.
    Text is added with default Absolute layout to Layer 1.

Hurray! We have added Image and Text object to project.

Let's move on and make them layout properly.

Update Layout​

Default layout

Object added to a project has an absolute Layout by default.

Update Image layout​

  • In the layers panel select Image 1
  • Choose Fit for Layout

Update Text layout​

  • In the layers panel select Text 1
  • Choose Snap for Layout. Set 100% for width. Set Center for Snap to.

Hurray! We have layout object using Fit and Snap layouts.

Our animation is close to getting the right look. Let's do the final round by updating the Object's properties.

Update Properties​

Update Image properties​

  • In the layers panel select Image 1
  • Select Properties tab
  • Select Cover for Fit

Update Text properties​

  • In the layers panel select Text 1
  • Select Properties tab
  • Set AWESOME for Text. Set 160px for Size.

Hurray! We have change object's properties

Let's move on and add some attractive animations.

Add Animation​

Add Animation to Image​

  • In the layers panel select Image 1
  • Select Animations tab
  • Select In tab
  • Select Tiles zoom in the Animation select field (field with placeholder Add IN animation to object..)
animation preview

Use play button to start preview and see animation behavior. You can update animation configuration while preview is active. Each time you change configuration animation will start from beginning.

Add Animation to Text​

  • In the layers panel select Text 1
  • Select Animations tab
  • Select In tab
  • Select Text in the Animation select field (field with placeholder Add IN animation to object..)
  • Enter 1s or 1000ms value in the Delay input
  • Enter 500ms value in the Duration per char field
  • Enter 300ms value in the Delay per char field
  • Enter 50 value in the Blue field

Hurray! We have finished creating animation project. Lets move on and get integration files

Get files for integration​

In order to get integration files we have to save our project.

Save project​

  • Click Save button.
  • In the Save panel click Save button

Get integration files​

  • Click Publish button.
  • In the Publish panel click Download button

Hurray! You have exported files needed for integration in your website.

To integrate the project into your website, continue with the instructions on the Integration page.