Looping Animations

Continuously animate Layers with a variety of animations

Table of Content

Timeline

Timeline looping is useful when you’d like to loop specific parts of a Layer’s animation cycle. In the following example, two additional keyframe animations have been added to the Layers timeline. And for editing convenience, they’ve been renamed to “Loop Start” and “Loop End”. Then with the Layers Timeline Looping, we can select these animation points for the loop.

In the screenshot on the right, the “Loop Amount” option can be used to decide how many loops should occur (enter “-1” for “unlimited”), and the “Animate to ‘Start’ in “Loop” option can be used to create yoyo-type loops (forward, then backward, then forward again) instead of just automatically jumping to the loop start frame after each loop.

Effects

Layer Loop Effects are are separate from the Layer’s regular timeline animation and are useful for attracting the users attention with continuous motion, such as a button that pulses in and out or a message that tilts back and forth.

Animation Templates

Hover your mouse over the choices for a live preview.

And save your own custom template so it can be used later in your workflow.

General Settings

1. Start Time
The time in milliseconds before the loop animation begins.

2. Animation Duration
The total time the animation will take place in milliseconds before the loop continues again.

3. Animation Easing
The easing equation to be used for the animation. Usually “Linear.easeNone” is the best choice.

4/5/6. Transform Origin X/Y/Z
Optional CSS transform-origin points.  “50%” is usually the best choice.

Advanced Settings

Move

1. Yoyo
Reverse the position as soon as the animation ends and vice versa.

2/3. Start End Horizontal Movement 
The ‘x’ (left) position to apply at the start and end of the loop animation. Accepts positive and negative numbers.

4/5. Start/End Vertical Movement
The ‘y’ (top) position to apply at the start and end of the loop animation. Accepts positive and negative numbers.

6/7. Start/End Depth Movement
The CSS translateZ for the start and end of the loop animation. This adds/removes 3D depth to the Layer.

8. Curved
Adds a Bezier Curve to the movement between the starting and ending points.

9. Auto Rotate
Automatically rotate the Layer according to its position along the Bezier path.

10. Bezier Curve Angle
Represents the curve’s placement in the animation. Lower degrees will place the curve toward the beginning, and higher degrees toward the end.

11. Bezier Curve Tension
Magnify the curve by this value. 1 = no magnification. 2 = twice the curve, etc.

12/13. Bezier Start/End X
Represents the starting and ending ‘x’ (left) position for the bezier curve.

14/15. Bezier Start/End Y
Represents the starting and ending ‘y’ (top) position for the bezier curve.

16/17. Bezier Start/End Z
Represents the starting and ending ‘z’ (3D depth) position for the bezier curve.

Scale

1. Yoyo
Reverse the scaling as soon as the animation ends and vice versa.

2/3. Start/End Scale X
The starting and ending scaleX values (width) for the loop animation.

4/5. Start/End Scale Y
The starting and ending scaleY values (height) for the loop animation.

6/7. Start/End Skew X
The starting and ending skewX values (horizontal plane) for the loop animation.

8/9. Start/End Skew Y
The starting and ending skewY values (vertical plane) for the loop animation.

Rotate

1. Yoyo
Reverse the rotation as soon as the animation ends and vice versa .

2/3. Start/End Rotate X
The starting and ending rotateX values (horizontal plane) for the loop animation. Accepts positive and negative values.

4/5. Start/End Rotate Y
The starting and ending rotateY values (horizontal plane) for the loop animation. Accepts positive and negative values.

6/7. Start/End Rotate 2D
The starting and ending rotation values (2D) for the loop animation. Accepts positive and negative values.

Filter

1. Yoyo
Reverse the animated filters as soon as the animation ends and vice versa.

2/3. Start/End Opacity
The starting and ending transparency levels for the loop animation.

4/5. Start/End Blur
The starting and ending blur filter value for the loop animation.

6/7. Start/End Grayscale
The starting grayscale filter value for the loop animation.

8/9. Start/End Brightness
The starting and ending brightness filter value for the loop animation.

Looping Animations

The Author

KC

Strength does not come from winning. Your struggles develop your strengths. When you go through hardships and decide not to surrender, that is strength.

If you need help with anything related to our plugin, please comment on a post or email me at [email protected].

Liked this Post?
Please Share it!