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 Interaction Panel.

Adding Animations

Start by opening up the "Animations" panel. Then click on the "+" icon in the Animation Panel. 

A new animation window will appear where you can create a new action after you select from among four types of actions: opacity, rotation, position, and scale.

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

Animation Types

There are four main types of Animation: Position, Rotation, Scale and Opacity.

Each individual action can only be one specific type of action, but different types of actions can be combined into a grouped animation. For instance, you can create a layer animation that moves around the Canvas (position action) while resizing (scale action) and slowly disappearing (opacity action).

There are four types of Animation:

  • Opacity (sets visibility/invisibility)
  • Rotation (object rotation)
  • Position (object movement)
  • Scale (object scaling such as pulsating bigger/smaller)

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, select multiple actions by holding down the "Command ⌘" key while selecting actions. Then click the group (folder icon) button or right-click and select "Group."

Animation Keyframes

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 type of action it represents.

There are two ways you can edit a keyframe. You can edit the keyframe timeline details in the Animation Manager underneath the canvas or more precisely on the bottom left in the controls panel.

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 retime 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 allow for more precise editing of actions as well as additional properties that can't be edited anywhere else.

Animation Controls Contains

  • Autoreverses
  • Resets
  • Loop count
  • Fine control of Key Frames

Affected Layers

Affected Layers are the layers that the action 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.

Begin at Current State

By default, new animation will "Begin at Current State." 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 "Begin at Current State" selected, all of the affected layers would move up from their current position by 100px. If begin at current state was not selected, all of the affected layers would move to the position in the first keyframe and then move up 100 pixels. For a scale action, "Begin at Current State" will just add onto the current scale. So a scale action that goes from 0% to 100%, with begin at current state enabled, will just take the current scale of the layer and increase it by one.

Loop

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

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.

Keyframes

All animations start with two keyframes: 

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

The Animation Timeline shows how long it should take to get from Keyframe 1 to Keyframe 2. Here, it’s 1 second. This means it will take 1 second for the animation to play.

Each animation has a minimum of two keyframes. 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 type of action. However, all keyframe controls contain:

  • Keyframe Time is the specific point in time for that keyframe.
  • Timing is how an animation should animate between one keyframe to another. You can edit the timing curve manually by dragging the two handles.
  • You can 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. 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?