How to Skew Elements in Adobe Edge Animate - dummies

How to Skew Elements in Adobe Edge Animate

By Michael Rohde

You can the Adobe Edge Animate Properties panel to create three of the same animation effects that you create with the Transform tool:

  • Skewing

  • Scaling

  • Rotating

Using the Transform tool gives you more fluid control over the animation. When you use the Properties panel, you set specific numbers — which provides greater precision in creating the animation.

Skewing your elements is a very cool effect. In Adobe Edge Animate CC, to skew your element means to animate your element through a transition of oblique angles or to change its direction or position suddenly. The best way to figure out what skew does is to experiment with it.

One example of skewing is to bring text onto the Stage. You can use skewing as an alternative approach to fading text in or scrolling it. Skewing gives the effect of the text shrinking in size as the different angles twist the words around.

Transform tool

With the Transform tool and element selected, place the cursor directly along an edge as shown in this figure so that you see the double lines with half-arrows. You can now click and drag to skew the element.


If you don’t want to animate the skew effect, be sure you disable the Auto Keyframe mode when you use the Transform tool.

If you do want to animate the skew, then set the Pin and Playhead at different points in the Timeline when you use the Transform tool and make sure the Stopwatch is red.

Properties panel

To use Skew via the Properties panel, follow these steps:

  1. Import an image or create an element.

  2. Adjust the Timeline Playhead and Pin to where you want the skewing to happen.

  3. From the Properties panel, adjust the number of Skew degrees.

You can specify both horizontal and vertical Skew values for the object. These values affect the object on its X and Y axis (respectively). To find the best effect, try using both values at varying degrees; also adjust the length of the animation.

After you set the Skew values, you can test the effect as follows: Move the Pin in the Timeline forward or backward to allow at least a 5-second duration (to provide enough time that you can really see the effect in action), and then reset the Skew values back to 0 to display the object without any Skew at all.

Adjusting the length of the animation for Skew has a dramatic effect on how the animation plays out. With a longer animation, the Skew effect has more time to show the different angles the object is twisted through before settling back to 0 (or whatever final value you set for the object).


The most you can skew an element is 89 degrees. If you use a value higher than 89, Edge Animate reverts the value to 89. You’ll probably want to use a skew value much lower than 89 for your final composition. A value of 89 twists and transforms the element greatly and may be a bit much.