Creating Your First Animation

The way to create animation is wholly unique to Lightwell. 

You can make individual Layers move, rotate, scale up and down in size, and change transparency over time. 

Animations and Layer's Ambient Motion are two similar, yet different features in Lightwell that will allow you to animate your layers in various ways. While Ambient Motion creates looping animation on your layers, Animations can be applied to one or multiple layers, and only play when triggered by an Interaction. These triggers are created in the Prototype Panel.

Adding Animations

You can create an animation by clicking on the "+" icon on the right side of a selected layer, or by using the "+" icon in the Action Panel. 

Animations can be applied to more than one layer at a time, which lets you add one animation across multiple layers very quickly.

Editing an Animation

Each action you create consists of two or more keyframes. A keyframe is a specific point in time (beginning to end) that stores information specific to the property it represents.

There are up to four properties in an Animation: Position, Rotation, Scale, and Opacity. All of which can be edited from the canvas.

When an animation is selected, you will see a red outline of the first animating layer. Using the timeline, scrub to the time you want to be customize. Then use the handles on the canvas to reposition, resize, rotate, or fade the layer.

  • Position: click and drag anywhere off of the handles to move the layer
  • Scale: use one of the corner handles to resize around the anchor point
  • Rotation: hover just outside of the corners till you see bent arrows and drag to spin the layer around the anchor point
  • Opacity: hover just outside the middle the right and left till you see the transparency circle, then drag left/right to fade in/out

Making changes to the canvas will edit any keyframes at the current time, or automatically add a new keyframe if needed.

For specialized controls of a specific property, select the property in the timeline, and see all of the keyframes for that property on the canvas at once. This lets you take a focused look at that property across the entire animation.

When focused on position, you can quickly bend your path by double clicking the keyframe handles on the canvas to add curve control point handles. Double click on the keyframes to make the path linear again.

Duplicating Animations

You can duplicate animations or animation groups by simply selecting a specific action, then right-clicking and selecting "Duplicate." This will duplicate all elements of the animation including the keyframes, affected layers, etc.

Grouping Animations

Animation groups allows combining multiple animations to be played at the same time and make the scene more complex.

To group actions, drag one animation onto another, or select multiple actions by holding down the "Command ⌘" key while selecting actions, right-click and select "Group."

Action Manager

The Animation Manager visualizes a timeline with the corresponding keyframes (represented as a diamond). The timeline allows you to playback multiple animations that are selected. It also provides powerful editing tools for your animations.

You can drag the playhead forward and backwards on the timeline to see how the animation will look at a specific moment in time.

Dragging keyframes forwards and backwards on the timeline will edit the time of the animation. The timeline supports selecting multiple keyframes from multiple actions to drag them forwards and backwards in time.

The timeline also visualizes repeating and auto-reversing animations. The repeating and auto-reversing parts of the animation will be semi-transparent. If you change the original animation, the semi-transparent part will automatically update to reflect how the animation will be played. For example, if you create an animation with two keyframes that repeats twice, you'll see two solid keyframes that you can edit followed by a transparent mirror of the action on the timeline for the repeated action.

Animation Controls

The Animation Controls on the right allow for more precise editing of actions as well as additional properties that can't be edited anywhere else.

Animation Controls Contains

  • Affected Layers
  • Additive
  • Autoreverses
  • Resets
  • Loop count
  • Fine control of Key Frames

Affected Layers

Affected Layers are the layers that the animation will be applied to. To delete an affected layer, you can hover over the layer tag and click the "x." If the layer exists in the scene, the layer tag will be deleted. If the layer does not exist in the scene, (possibly because the layer was deleted or exists in another scene), the layer tag will be colored gray.

Additive

By default, new animation will be additive. This means that the animation starts from the current values of the affected layer (position, scale, opacity, etc.).

For example, if a position animation moved the affected layers up 100 pixels, with "Additive" selected, all of the affected layers would move up from their current position by 100px. If "Additive" was not selected, all of the affected layers would move to the position in the first keyframe and then move up 100 pixels. This is the same for scale, rotation, and opacity.

If multiple animations are playing and are additive, then the values will all be applied on top of each other. If they are not additive, then the last animation to trigger will override all of the others.

Auto Reverses

Auto Reverses allows you to create an animation that will playback in reverse after the created action is complete. When used in conjunction with loop, the animation will run and reverse before repeating.

Resets

This determines wether the layer should be updated to keep the ending values of the animation when it finishes playing.

Turning reset on will move/scale/rotate/fade the layer to look as it did before the animation started.

Loop

Loop lets you specify if you want the animation to repeat a certain number of times or infinitely.

Keyframes

All animations need at least two keyframes to player:

  • Keyframe 1 = a start time
  • Keyframe 2 = an end time

The keyframes store property values – like position 0, 0 and position 100, 100. The Animation Timeline shows how long it should take to get from Keyframe 1 to Keyframe 2. The animation will then interpolate all of the values in between when it plays.

You can add or remove keyframes from either the Timeline or the right controls. Some of the controls inside each keyframe are specific to the contained properties. However, all keyframe controls contain:

  • Keyframe Time: the specific point in time for that keyframe.
  • Timing: how an animation should ease between one keyframe to another. You can edit the timing curve manually by dragging the two handles.
  • Timing presets: quickly select a timing curve from the four standard pre-set timing curves by simply clicking on the provided curves: Linear, Ease, Ease-in, and Ease-out, or the specialized Spring curve. For example, Linear timing allows your animation to transition without any slowing down or speeding up.

Read More Related Articles

Did this answer your question?