Animations

Timeline overview

  1. Go to first keyframe - go to the first keyframe on the timeline
  2. Go to previous keyframe - go to the previous keyframe on the timeline
  3. Play the animations - play all the animations
  4. Go to next keyframe - go to the next keyframe on the timeline
  5. Go to last keyframe - go to the last keyframe on the timeline
  6. Auto-keyframe mode - automatically adds a keyframe to the current pinhead position every time a property is changed
  7. Endless preview mode - continues to play endlessly until the play button is pressed again. Especially useful when there are repeating animations
  8. Numeric input field - numeric representation of the current pinhead position. Can be used also as input for specific time.
  9. Properties of the selected keyframe - information about the selected keyframe
  10. Timeline - represents the relation between the keyframes and their position in time
  11. Pinhead - movable element that is used to mark the place for the new keyframes are added. When scrubbing the pinhead a preview of the animations is displayed in the viewport.
  12. UI element - the name of the UI element
  13. Animated property - the type of the animated property
  14. Currently set animation - the current animation class used
  15. Animations library - a shortcut to the Animations library. It can be used to browse through all the animations in the UI composition and to choose from them an animation to be reused.
  16. Remove animation - remove the current animation class used
  17. Add new animation - removes the old animation class and creates a new one
  18. Property settings - a shortcut to the settings for the animation of the property such as timing, iterations, direction and other
  19. Keyframe - an icon representing a keyframe and its position on the timeline
  20. Selected keyframe - a selected keyframe

Creating animations using the auto-keyframe mode

The easiest way to create animations is to use the Auto-keyframe mode. To use it click on its icon (the red record dot). When enabled the auto-keyframe mode adds a keyframe to the current pinhead position every time you change a property of a UI element.

For example if we want to animate the position of a UI element we can do this by following these simple steps:

1.Activate the Auto-keyframe mode (when active the button becomes darker)

2.Move the pinhead to the position that you would like the animation to start

3.Move the UI element to its starting position (notice that keyframes for the position are automatically added)

4.Move the pinhead to the position that you would like the animation to end

5.Move the UI element to its end position (notice that keyframes for the position are automatically added)

To preview the animation simply click the "Play" button. The auto-keyframe mode adds keyframes not only when moving UI elements in the viewport but also when changing properties in the properties panel.

Animations library

The Animations library is a unique feature of the Coherent Editor which allows you to reuse the same CSS animations on different UI elements.

To start the Animations library click on its icon on timeline and you'll see a list of all the animations currently available in the UI composition. You can choose from the list the animation that you want to apply.

You can use the input field to search for a specific animation by name.

Using the red "X" shortcut you can delete an animation. Note however that this will delete the animation definition for the whole UI composition so all UI elements using it will no longer have an animation.

When you edit the keyframes on any of the UI elements that share the same animation all other lines are updated as well since this is actually the same animation.

Editing keyframes

Selecting keyframes

To select a keyframe simply click on it in the timeline. Information about the keyframe position, animated property and name of the UI element will be displayed above the timeline.

Moving keyframes

To move a keyframe simply drag and drop it to the new position in the timeline.

You can change the zoom level of the timeline using the mouse scroll. The timeline uses milliseconds as base units.

Changing the value of the animated property

The process of changing the value of the animated property of a particular keyframe is quite similar to creating a new keyframe.

1 First move the pinhead to the position of the keyframe

2 Set the new value for the property in the properties panel and then click the keyframe icon next to it and the new value for this property will be recorded. If you are using the auto-keyframe mode this will be done automatically.

Deleting keyframes

To delete a keyframe, select it and press the "Delete" keyboard key.

Animation options

Animation options such as easing, direction, iteration and name can be set in animations options menu. To access it simply click on the gear icon on the timeline for the relevant animated property.

Manually creating animations

You can also create keyframes manually:

1. Select the element that you would like to animate

2. Move the pinhead of the timeline to the time that you would like your animation to start

3. Select the property that you would like to animate, first set the value that you would like to have and then click on the "keyframe" symbol next to the property.

A keyframe for this element and property is automatically added to the timeline.

You need to first set the value of the property and then click on the "keyframe" symbol otherwise you'll set the initial value of the property and not the new one

4. Move the pinhead of the timeline to the time that you would like the animation to end.

Set the new value of the property and then click the "keyframe" symbol next to the property.

Again a keyframe for this element and property is automatically added to the timeline.

The animation is now complete and you can preview it by clicking the "Preview" button (marked with the play icon). The button next to the play button activates the endless preview mode. In it the animation playback continues indefinitely until the play button is clicked again.