Learn Callipeg

Transformation Layer

The transformation layer allows you to keyframe a transformation of a drawing, an animation or a video. That way, you can move drawings or animations very quickly with a system of keyframes and curves.

When you tap on this icon, it creates a new transformation layer which is directly linked to your last current layer. When a transformation layer is linked to another layer, this latter becomes its “child“, thus creating a hierarchy.

The icons visible on the transformation layer are different than those on the other layers. The 3 icons at the left of the menu are the most important functions for easy access.

The eye enables or disables the layer. When it is enabled, the transformation is active. You can’t make changes on the child layer while its transformation layer is enabled. Disable it to be able to make changes to the linked layer(s).

The multiple pivot points makes the transformation layer consider each child layer’s pivot point individually. Tap on this icon to change to global pivot point.

The global pivot point uses only one pivot point for all the child layers.

You can change the pivot points of each individual layer in the transformation layer’s options which you can access with the next icon.

Tap on this icon to deploy the curves in the timeline and access more options for the transformation and access and change the values for the translation, scale and rotation.

Tap on the menu icon to access more layer options:

Tap on this icon to duplicate only the transformation layer.

Tap on this icon to duplicate the transformation layer and all the layers contained inside. It duplicates the hierarchy.

This icon flattens the transformation layer. It creates a new single drawing layer with the result of the transformed layers and disables the original layers which remain in the layers pile.

Hierarchy

The Transformation layer can contain layers to which it is linked. The layers contained inside a Transformation layer are its children and the layer containing the children is the parent.

Only Transformation layers can be parent. The children can be all kinds of layers: Transformation, Drawing and Video layers.

When the transformation layer is current, you can see its links to its children layers. The children layers are slightly shifted to the right.

You can hide the children with the arrow located on the parent and gain space while you are not working on these specific layers.

A Transformation layer containing children layers can also be child to another Transformation layer, creating another level of hierarchy.

When a layer is linked to a Transformation layer, there is a diamond icon next to the layer icon.

To link a layer to a transformation layer, you need to put it inside it. To do so, move the layer by dragging it over the transformation layer and drop it. To drop it at the correct place, a green bar is there to guide you.
Drop the drawing layer at the top of the transformation layer to place it over it in the layer order. The drawing layer will not be linked to the transformation layer and they will be independent from one another.
Drop the drawing layer over the transformation layer to place it inside of it. The drawing layer will be linked to the transformation layer and inside its hierarchy, meaning the drawing layer becomes the child of the transformation layer and the transformation layer becomes the parent of the drawing layer.
Drop a drawing layer between a transformation layer and its child to place it inside of it, over the existing child. The drawing layer will be linked to the transformation layer and inside its hierarchy, meaning the drawing layer becomes the child of the transformation layer and the transformation layer becomes the parent of the drawing layer.
Drop a drawing layer over a child layer to place it under the child layer, inside the transformation layer. The drawing layer will be linked to the transformation layer and inside its hierarchy, meaning the drawing layer becomes the child of the transformation layer and the transformation layer becomes the parent of the drawing layer.

THE TIMELINE

When you create a transformation layer, it will automatically be linked to the last current layer (drawing or video).
Drag layers onto the transformation layer to link them to it.
To remove the link between the transformation layer and another layer, enter the curves mode.

Tap on this icon to enter the curves mode and access more options.

When you enter this mode, there are several options on the left, where the pile of layers used to be.
 
Just beneath the transformation layer are the transformation values which you can change to make your animation move.
And under these values is the list of linked layers.
 
Tap on the cross next to a layer’s name to unlink it from the transformation layer.
If you wish to add a layer to this list, then go back to the layers pile and drag the layer onto the transformation layer.

Tap on this icon to exit the curves mode and go back to the layers pile.

Keyframes & curves

Once you have linked a Transformation layer to another layer, you can start adding keyframes in the Timeline. If your Transformation layer is linked to a Drawing layer, make sure that your drawing sheet(s) extend to the desired duration of the animation.

You can use the Transformation layer on a single drawing, an animation or a video.

You can move your drawing or video in a transformation box like you would when using the transformation tool.

When you transform while holding one finger down, you can snap the transformation box to main guidelines (horizontal, vertical, diagonals and center) and to the box position guidelines.

In the side-bar, you get some transformation options.

Enables the zoom and pan gestures. If it isn’t enabled, you will be able to transform the image with your fingers. When enabled, the transformation can only be made by handling the transformation box and you can zoom and pan with your fingers.

Sends you to the previous keyframe in the timeline.

Sends you to the next keyframe in the timeline.

Inverts the content of the transformation box horizontally.

Inverts the content of the transformation box vertically.

Resets the transformation.

You can add keyframes from the transformation values, or directly in the curves in the timeline.

Before adding a keyframe, go to the desired frame to set the current frame.

Tap on the empty circle next to the color to add a new keyframe.

Diamonds indicate the presence of keyframes for specific values (position, scale, rotation).

Tap on a diamond to remove the keyframe, it then becomes an empty circle.

Simply moving your image on the canvas with the transformation box creates keyframes on the current frame for the different values you moved.

The movements of the HUD create keyframes for Positions X, Y, Scale X, Y and Rotation. The respective curves are displayed according to what you are currently changing.

When a keyframe is added, it appears on the current frame of the timeline. You can move the keyframe directly in the timeline to change its frame position, which will also change its values.

If you wish to change the frame position of the keyframe without changing its values, hold one finger on the screen while moving the keyframes.

Hold 2 fingers on the screen to move the keyframes vertically, changing only the values without changing the frame position.

Position X refers to the position of the object on its horizontal axis. The value is expressed in pixels.
Position Y refers to the position of the object on its vertical axis. The value is expressed in pixels.
Scale X refers to the width of the object, the value is expressed in %.
Scale Y refers to the height of the object, the value is expressed in %.

These values can be changed by moving the transformation box, the curves, or directly by sliding your finger or pencil on the values. You can also double-tap on them to enter the desired value manually.

The eye show or hides the curve referring to the values.

Tap on a keyframe (diamond) to select it. A selected keyframe is orange.

To select multiple keyframes, double-tap then drag the area in which all the keyframes will be selected.

This multi-selection will select the keyframes of all the curves displayed in the timeline. If you wish to select only the keyframes of the Position X, then tap on the eye of all the other curves displayed to hide them before selecting.

On the contrary, if you wish to select the keyframes of all active curves, then display them all on the timeline before selecting.

When one or several keyframes are selected, the action panel appears at the top of the timeline.

Deletes the selected keyframe(s).

Copies the selected keyframe(s).

Pastes the keyframe(s) starting at the current frame.

These icons represent the strength of the curves of the tangents between 2 keyframes. That way, you can determine how abruptly your animation slows down or speeds up. This is a good way to build your ease-ins and ease-outs.

This example shows the curve of the Position Y values of the animation. Different tangents have been set in order to control the animation speed.

 

This example is the same as above. The only difference is that all the tangents of the animation curves have been set as linear.

Contact Us

Thank you

Your message has been sent
We will come back to you shortly