Messenger Icon

Animation 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

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

litemove animation selector

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.
There are six properties in From-To Tabs
GSAP 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.
litemove animation translate
Translate-Y Demonstration

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

litemove animation from to units
Units reference
GSAP 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.

litemove animation opacity
Fade In (0 in From Tab) and Fade Out (0 inTo Tab)
GSAP 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.

litemove animation scale

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%

GSAP Rotation
Rotation A Property to rotate elements completely by a precise degree measurement
litemove animation rotation

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

Custom
Incorporate any CSS or GSAP property of your choice in this Custom box space

Other actions and functions

GSAP Flip

Since 27th November 2023, Litemove has added a new action for animation effects. This action will create smooth transitions between two states using GSAP Flip (Elements will be animated from its current state to the new state)

There are  five options in this method:

  1. Add Class
  2. Remove Class
  3. Toggle Class
  4. Move to Origin Position
  5. Move to Target Position

Delay & Duration

Delay (s) The delay before the animation starts in seconds
Duration (s) The duration of the animation in seconds
litemove animation delay duration

Simply click and drag the animation on the timeline to adjust its duration. This allows you to control how long the animation lasts.
Additionally, you can change the delay of the animation by adjusting its position on the timeline. Moving it forward will decrease the delay, while moving it backward will increase the delay.

Split Text

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
litemove animation split text

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

Stagger
A value of Stagger Each (s)= 0.1 would cause there to be 0.1 second between the start times of each tween. A negative value would do the same but backwards so that the last element begins first.
Stagger From The position in the Array from which the stagger will emanate
litemove animation stagger

For instance: the animation of Header is applied “Stagger” with 0.5s and staggered from “Start point”

litemove animation stagger

-> Stagger GSAP documentation

Repeat

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.
litemove animation repeat

-> Reference Source: Repeat GSAP

Yoyo

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.

-> Reference Source: Yoyo GSAP

Transform Origin

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.
litemove animation transfom 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

Ease

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

Back to top