Messenger Icon

Create first animation – SaaS method

If you are familiar with WordPress, you can skip this article.

Livemove is a standalone animation builder with a visual editor that is compatible with multiple website platforms. In fact, you can easily customize the animation effects of elements on your Site without coding for any platform.
It works with WordPress, Webflow, ReactJS, and any page that requires logging in.

Step by Step to create your first animation

In this tutorial, we provide a step-by-step guide on using Litemove across different platforms (Saas method) . If you are proficient in WordPress, you can simply install our plugin and bypass this tutorial.

 

Create a project

First, register an account and log in at Softlite Website: https://softlite.io/litemove/
After that, you will be directed to https://litemove.softlite.io/projects/The Projects Dashboard.

You can immediately edit elements’ animations without requiring additional plugins for your site

litemove create first animation
The first step in this Litemove Softlite is to create a New project

-> Click on “Add new project” to initiate your first project

A popup appears to require “Project Name” and your target “Website URL”
Enter the project name and the URL of your target website

Note: Each project can contain multiple distinct pages, each associated with a parent website URL. If you want to apply Litemove to another website, you’ll need to create a new project.

For instance: we will make a demo with website https://softlite.io/
-> Click on “Create Project” to proceed

litemove create first animation 3
A Project Item apprears subsequently

Add a target page to Project

In the next step, Click on the added Project
A dashboard will display the pages of your target site. You’ll need to manually add pages to bring them to the Editor.
There are two ways to achieve this

Enter input URL

You can directly embed the page URL into the provided box (top-right of your screen)
This is the most popular and quickest way to add a target public page into your project

For instance, we embed a page URL https://softlite.io/litemove-demo/
Then Click on “Add Page”

Immediately, an item display on this project dashboard

litemove create first animation 5

Use Litemove Extension

Alternatively, we’ve developed a Litemove Extension for the Chrome browser, which you can consider setting up.
In some cases, you need to use this extension to add pages

  1. Private Pages
  2. Pages made by React, Angular, Vue, etc
  3. Pages require to log in
litemove create first animation 7

For example, you can use it in your WordPress dashboard or any web dashboard
Go to your target page, it’s better when scrolling down to the end of page (to make sure all of your elements on this page are already loaded)
Click on the extension icon, choose the corresponding project, and then click on “Add Page.”

Configure Timelines

Returning to the current Project dashboard, you’ll find the added page there. Click on “View Page”
You have two options for the Timeline: you can import an existing one or create a new one.

When creating a new Timeline, it redirects to Litemove Editor as below

 

→ Start configuring your Timeline Tab Control

Depending on Trigger actions, the settings of the Timeline Control Tab appear correspondingly.
There are four options as below:

  1. Page Load: Animations start immediately after page loading
  2. Scroll: Animations start when the user scrolls down/up the elements
  3. Click: Animations start when the user clicks the elements
  4. Hover: Animations start when the user hovers over the elements

Configure Animations

Click on the “plus icon” in Editing Timeline to add your first animation.
On the left of your screen, open the Animation Control Tab in Control Panel

litemove-create-first-animation-12

→ Start configuring your animation

Find out more: Animation Control Tab Panel

Export

After all, save your animation editor page project
-> Click on “Export”

Export to Javascript

Upon clicking, all animation adjustments made to your current page project will be automatically rendered to JavaScript coding.

litemove create first animation 13

You can embed JavaScript Library and JavaScript Code in sequence to your Page Builder Settings or Website Platform’s default Settings

Export Timeline

On the other hand, you can export your existing Timeline to Import new projects.
You are able to choose to export a single Timeline or All Timelines

Import Timeline to new projects

 
ON THIS PAGE
MORE

Back to top