Messenger Icon

Black Friday & Cyber Monday Special: Get 30% OFF all Lifetime Deals!

Timeline Control Panel

After setting up your Timeline Control, 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

General Settings

The first step in this Animator Softlite is to create a New project

Click on the single animation in your Editing Timeline and go to Litemove Control Tab to start structuring the detailed parameters

Each animation will be applied to the selected element.

Selector

To begin, you either type directly your specific elements on Selector Box or use our Selector Detector to scan and pick elements from your Preview Page

The first step in this Animator Softlite is to create a New project

From and To

Customize your animation by utilizing additional From and To tabs that include the properties to be animated

  1. From Tab or Start Point: If you only configure properties in this Tab, desired animations start changing from a specific point/value to the default state.
  2. To Tab or End Point: If you only configure properties in this Tab, desired animations start changing from the default state to a specific point/value.
  3. If you simultaneously combine 2 tabs, your animations transform between your configured points/values.
The first step in this Animator Softlite is to create a New project
Translate
By applying animation to a Translate property, you can move an element along either the Translate X (horizontal axis) or/and Translate Y (vertical axis) to create dynamic motion.
The first step in this Animator Softlite is to create a New project

The default unit is the pixel (px)
You can apply other units such as percent, em, rem, etc.

The first step in this Animator Softlite is to create a New project
Opacity
Animating the Opacity allows for effortless creation of the classic Fade in/Fade out animation

The amplitude of Opacity property works from 0 to 1. The default value is 1.

To achieve a smooth “Fade In” transition, simply set the opacity to 0 in the “From” pane. Conversely, applying 0 opacity to the “To” pane will generate a “Fade Out” effect.

The first step in this Animator Softlite is to create a New project
Scale
The Scale property enables you to animate the size of an element (Zoom In or Zoom Out)

The default size is 1, with a minimum value of 0. Applying a “To” Scale of 2 will transform the element from its default size to double the size.

Please be mindful of the Size Settings in your page builder to prevent any potential confusion or complications.

The first step in this Animator Softlite is to create a New project

By inputting specific values, you can individually control the Scale along different axes, enabling you to animate Scale X, Scale Y, or both. The initial default value pertains to Scale X (the horizontal axis), followed by the subsequent value for Scale Y (the vertical axis).

For example: 20% 50% corresponds to Scale X = 20% and Scale Y = 50%

Rotation
Rotation A Property to rotate elements completely by a precise degree measurement

Fill out the input value to Rotation Box, the default unit of this function is degree

The first step in this Animator Softlite is to create a New project
Custom
Incorporate any CSS or GSAP property of your choice in this Custom box space
The first step in this Animator Softlite is to create a New project

Other functions

Delay (s) The delay before the animation starts in seconds
Duration (s) The duration of the animation in seconds
Enable Split Text This JavaScript utility is user-friendly and enables you to effortlessly divide HTML text into characters, words, and lines. Its exceptional flexibility makes it an ideal choice for seamlessly generating HTML5 text animation effects.
Split Type There are three basic types of this function: Chars (Characters), Words and Lines
Split Class

To reach more information, you can refer to GSAP Split Text Animation

Stagger Each (s)
Stagger From
Repeat (times) When you want to repeat the animation. If you set 1, it means that the animation will run one more time.
Repeat Delay (s) The delay time between repeaters in seconds.
Enable Yoyo The function operates similarly to the Yoyo game, facilitating animations that move back and forth in an alternating manner, reversing direction on each repeat.
Transform Originempowers you to control the initial position of your transform properties (translate, scale, rotation). It is the point around which a transformation is applied
. For example, the transform-origin of the rotate() function is the center of rotation.Transform Origin

The transform-origin property may be specified using one, two, or three values. You can customize the variety of Transform Origin’s formats by entering input values such as: 

  • center
  • top left
  • 50px 50px
  • bottom right 60px

For more information, you can refer to Transform-Origin GSAP

Enhance the appeal of your animations by employing various Ease styles for added interest

Some available options for ease function:

  1. Power 1
  2. Power 2
  3. Power 3
  4. Power 4
  5. Back
  6. Elastic
  7. Bounce
  8. Rough
  9. Slow
  10. Circ
  11. Expo
  12. Sine

For more information of Ease function, you can refer to Easing GSAP documentation

Related tutorial

 
ON THIS PAGE
MORE

Back to top