Overview of LiteMove Editor Builder

Follow Softlite.io on Youtube https://www.youtube.com/@softlitedotio

Litemove Editor Builder integrated deeply GSAP Library serves as the platform where users generate animations on webpages. It encompasses three primary components: the Preview, Editing Timeline and Control Panel. Within each of these components, users have the flexibility to expand and modify inner sections based on their preferences.

Litemove Structure

Litemove Editor Builder

Litemove Preview

The Preview section showcases a real-time preview of the page (at a time adding a page to your project) under editing. It is dynamically rendered by a JavaScript engine, typically without server-side loading. Essentially, this is the space where you can observe the anticipated appearance of the site.

Litemove preview

Depending on Trigger Options, the Preview can be extended and correspondingly added inner area elements

Editing Timeline

At the Editing Timeline (also known as the “Timeline”), you can easily customize the time or position of animations on multiple responsive devices by clicking, dragging, and dropping them.

Litemove editing timeline

In the top line, there are a bunch of action icons, explained below:

Plus icon to add animation, you can add as many as you want.
A button to operate animations
Repeat Timeline
Open "Preview" to full screen
Reload Page
Live Preview: to check Animation in Live Preview status, this action is applied for Scroll and Hover Triggers
A button to view Animation on Front-end. Please Save Time Line before viewing
Responsive Mobile
Responsive Tablet
Responsive Desktop

By right-clicking on the animation, you can reveal the context menu, which provides options to delete or duplicate the animation.

litemove editing timeline 2

Litemove Control Panel

By default, The control panel displays on the left of your screen and functions as an editing dashboard, serving as the central area where users can configure all aspects of animations. It consists of three control tabs: Timeline, Animation, and Project.

Litemove Control Panel

Timeline Control Tab

When creating your first Editing Timeline, a Control Panel instantly displays on the left of your screen by default.
You can configure the parameters of Timeline by a Timeline Control Tab in this Control Panel.

In the first row, you can select a specific Timeline from your list or import/create a new one.
To the next row, a box displays the name of the Timeline.

Trigger on Select the trigger that will start the animation, and it will be applied to this entire timeline.

There are four options as below:

  1. Page Load: Animations start immediately after page loading
  2. Page Exit: It animates before moving you to the new page you’ve clicked on.
  3. Scroll: Animations start when the user scrolls down/up the elements
  4. Click: Animations start when the user clicks the elements
  5. Hover: Animations start when the user hovers over the elements
litemove timeline control tab 2

Each trigger has its own sub-settings. Depending on Trigger actions, the settings of the Timeline Control Tab appear correspondingly.

Animation Control Tab

Similarly, all the animations in Timeline will be configured to Animation Control Tab in Control Panel.
Within this panel, you have control over the properties to animate for each individual animation in your timeline.

For more details, you can reach to Animation Control Tab

Project Control Tab

A Control Tab to configure other Projects’ actions

  1. Breakpoints: Define the parameter widths for various devices.
  2. Reset Timelines: Fine-tune animation effects for different device sizes.
  3. ScrollSmoother: Enhance animation effects in conjunction with scrolling triggers.
  4. Custom Javascript: Customize JavaScript in this section.

Back to top