Image Transitions

Animator

Image Transitions

Transitions can be created for the whole image or for individual elements within the image. If created for the whole image, the image will use the background as a base. Individual elements will use the image as a base. Use the 'Node' dropdown to select either the whole image or an element within it. If a node selection already has transitions, those transitions will be opened by selecting the node.

Add New Transition

Transitions can be chained, i.e. played one after another. Transitions will be played in the order that they are defined in the 'Transition' section. When multiple nodes or elements are selected, the animations will run in parallel. The transition startup can be delayed by entering a millisecond value in the delay field.

Clicking on the plus icon after 'New Transition' will open a popup and allow the creation of a new transition type. Click on the required transition type.

Select Transition

The types are:

Combination: creates an animation of multiple transitions and can include Movements, Scaling, Rotations or Attributes (which allow color, opacity, stroke and dash array options where applicable.
Path: allows the importation of an external path or the use of an internal path(often invisible) to be used as a basis for the movement of the whole image or an element in the image.See Path Transitions.
Curve: creates the movement along a defined curve or wave.See Curve Transitions.
Clip: allows the creation of an SVG clip which can show/hide various parts of the image or the whole image.See Clip Transitions.
Mask: allows the creation of an SVG mask which can be used to change the color of all or part of an image. See Mask Transitions.
Morph Path: allows the definition of the morphing of a path in the image into another image. The new morph path can be imported into the image or could be a hidden path in the current image. See Morph Transitions.

N.B. When there are no existing transitions, a hyperlink 'Copy Transitions from an Existing Element' will be shown. Click on this to open a popup that presents a list of current transitions. Select one of those transitions to copy them to the currently selected element.

All transitions have the 'Duration', 'Delay' and 'Easing' options.

Duration: Duration defines the running time of the transition in milliseconds. If 500 is entered, this means 500 milliseconds or half a second.
Delay: Delay defines the time in milliseconds before the transition starts. If the delay is in a series of transitions, the delay time will start after the end of the previous transition. For example, if 500 is entered, this means 500 milliseconds or half a second.
Easing: Easing defines the speed of the transition at various points when it is running. It may define acceleration or deceleration at those points. Using easing can help make animation smoother and more realistic.
Select the required easing from the long list in the drop down select. The default option is 'Linear' which means a steady movement with no acceleration or deceleration. Names containing 'in' means emphasis at the beginning of the transition and 'out' with emphasis at the end. 'inOut' means emphasis at both start and end.
Detailed information about each of the options can be found at Easing Graphs
Exclude Transition: This option allows the transition to be suppressed or included at runtime by using a variable. To set a variable, open the 'Exclude Transition' option by clicking on the open arrow to the left. To set a variable, enter a non numeric name in the 'Variable Name' field and then set a value in the Variables section at the bottom. To suppress the transition, the variable value must be either '1' or 'true'. Any other value will allow the transition to run. To completely ignore this option, leave the field blank.

Basic Transition Properties

Exclude Transition at Runtime