Complete Guide on Easing Keyframes in Alight Motion

What are easing keyframes?

Easing keyframes are a concept in animation and motion graphics that determine how the motion or transition between two keyframes progresses over time. They control the acceleration and deceleration of an animation, making the movement appear more natural and less mechanical.

There are different types of easing functions, such as:

• Ease In: The animation starts slowly and then speeds up.
• Ease Out: The animation starts fast and then slows down toward the end.
• Ease In and Out: The animation starts slow, speeds up in the middle, and slows down again at the end.

These easing functions help create smoother transitions by simulating real-world motion, where things often don’t move at a constant speed. They can be applied to various properties like position, scale, rotation, and opacity.

How to use easing keyframes?

To use easing keyframes in animation, you generally apply easing functions to adjust the timing of your animations. This can be done in various animation software or code libraries. Here’s how to use them in different contexts:

1. In Animation Software (e.g., Adobe After Effects, Blender, etc.):

• Select Your Keyframes: First, you need to have keyframes in your animation timeline (for example, position or opacity).
• Right-click the Keyframe: In most software, you can right-click on a keyframe to bring up the keyframe editor.
• Choose Easing: There are usually options like Easy Ease In, Easy Ease Out, or Easy Ease In and Out. You can also manually adjust the graph curve that represents the motion.
• Edit Easing Curves: You can further customize the easing by adjusting the graph editor. A smoother curve indicates a more natural easing effect (e.g., slower start and end).

2. In CSS (for Web Animations):

CSS has built-in easing functions that can be applied to transitions and animations using the transition-timing-function or animation-timing-function properties.

Example:

cssCopy code.my-element {
  transition: transform 2s ease-in-out;
}

Common easing functions in CSS:

• ease: Default easing, starts slow, speeds up, and slows down.
• linear: Constant speed throughout.
• ease-in: Starts slow and speeds up.
• ease-out: Starts fast and slows down.
• ease-in-out: Starts slow, speeds up, and slows down.

3. In JavaScript (for Custom Animations):

JavaScript libraries like GSAP or Anime.js can be used to create custom easing functions.

Example with GSAP:

javascriptCopy codegsap.to(".my-element", {
  duration: 2,
  x: 100,
  ease: "easeInOut"
});

In this example, the element moves along the x-axis with an ease-in-out easing effect over 2 seconds.

4. In SVG or Canvas Animations:

If you are working with SVG or custom canvas animations (e.g., using JavaScript), easing functions can be applied by manually calculating the eased values based on a mathematical function like quadratic, cubic, or sine easing.

Example (JavaScript custom easing function):

javascriptCopy codefunction easeInOut(t) {
  return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
}

Summary:

• Choose Your Keyframes: Define where the animation starts and ends.
• Apply an Easing Function: Use built-in easing functions like ease-in, ease-out, or custom functions to adjust how the transition occurs.
• Adjust Duration: Make sure the duration of the animation complements the easing type for the most natural effect.

By controlling the way animations speed up or slow down, easing keyframes help make the movement feel more organic and less mechanical.

Alight Motion is a mobile animation and motion graphics app that allows you to create animations with ease, including using easing keyframes. Here’s a complete guide on how to use easing keyframes in Alight Motion:

1. Adding Keyframes

To start using easing keyframes, you need to first create your animation by adding keyframes to the property you want to animate (e.g., position, scale, rotation, opacity).

Steps to add keyframes:

1. Open your project in Alight Motion.
2. Select the layer or object you want to animate (e.g., a shape, text, image, etc.).
3. Tap the Properties button (the little slider icon).
4. Tap the + Keyframe button next to the property you want to animate (for example, Position, Scale, etc.).
5. Move the playhead to a new point on the timeline and adjust the property (e.g., move the object to a new position).
6. A new keyframe will automatically be added at the current playhead position.

2. Accessing the Easing Options

Once you have two or more keyframes, you can apply easing to control the smoothness of the animation.

Steps to add easing:

1. Tap on the keyframe you want to apply easing to.
2. A menu will appear with different options. Tap on Easing.
3. You’ll see a list of easing options, each corresponding to different kinds of motion, such as:
   • Linear: Constant speed.
   • Ease In: Starts slow and speeds up.
   • Ease Out: Starts fast and slows down.
   • Ease In and Out: Starts slow, speeds up, and then slows down again.
   • Custom Easing: Allows you to adjust the easing curve manually.

3. Using Preset Easing Curves

Alight Motion comes with preset easing functions, which you can use quickly for most animation needs.

Common easing types:

• Linear: No easing. The object moves at a constant speed between the keyframes.
• Ease In: The object starts slow and gradually speeds up as it reaches the next keyframe.
• Ease Out: The object starts fast and then slows down as it reaches the next keyframe.
• Ease In and Out: A combination of the above, where the object starts slow, speeds up in the middle, and slows down at the end.

To apply any of these easing functions:

1. After selecting the keyframe and tapping Easing, choose one of the preset options like Ease In, Ease Out, etc.
2. Your keyframe’s motion will adjust according to the selected easing function.

4. Custom Easing Curves

If you want more control over the animation, Alight Motion allows you to customize the easing curve.

Steps for custom easing:

1. Tap on Custom Easing (after tapping on a keyframe’s easing option).
2. This will open a graph editor where you can manipulate the curve that defines the easing behavior.
3. Adjust the curve by dragging the points on the graph to change the acceleration and deceleration of the animation. The X-axis represents time, and the Y-axis represents the value of the animated property.
4. You can make the transition smoother or sharper by changing how steep or shallow the curve is.

5. Fine-tuning with Easing Settings

Alight Motion also allows you to fine-tune the easing behavior by adjusting the speed and curve between keyframes.

• Adjust Speed: You can change the speed of the easing effect by modifying the curve’s control points.
• Modify the Timing: By pulling or pushing keyframes closer together or further apart, you can adjust how fast or slow the animation occurs.

6. Visualizing Easing in the Timeline

Once you’ve applied easing to your keyframes, you can visually see how the easing affects the motion:

• Linear animations will have a straight, flat path.
• Ease In, Ease Out, and Ease In-Out will have curves in the timeline, with the motion appearing slower at the beginning and/or end.
• Custom easing will display as a custom curve in the timeline, which will show how the speed changes over time.

7. Previewing and Adjusting the Animation

To see how your easing looks:

1. Press the play button on the timeline.
2. Watch the animation and notice how the motion feels. If the easing isn’t smooth enough or too abrupt, go back and adjust the easing curve or keyframe positions.

8. Tips for Easing Keyframes

• Use Ease In/Out for natural animations: For most smooth, natural movements, the Ease In and Out function works best. This is great for animations like objects fading in and out, or characters moving across the screen.
• Experiment with custom easing curves: If you want a specific style of motion, tweaking the custom easing curves can give you more control over the feel of the animation.
• Use a combination of easing: In some animations, you can apply different types of easing to different keyframes for more complex animations.

9. Easing in Motion Paths (for Motion Graphics)

If you’re animating along a motion path, easing can be applied to control how the object moves along the path.

1. Add keyframes to the Position property.
2. Set the path of motion.
3. Apply easing to control how the object moves along that path—whether it speeds up or slows down as it moves.

---

Summary

• Keyframes control the start and end points of your animation.
• Easing smooths the transition between those keyframes, making the animation more natural.
• Preset easing options (Ease In, Ease Out, Ease In and Out) can be applied for quick results.
• Custom easing lets you create personalized curves to adjust how the motion accelerates or decelerates.
• Graph editing in custom easing provides precise control over the timing and flow of your animations.

By understanding and experimenting with easing keyframes in Alight Motion, you can create smooth and professional-looking animations for your projects.