Skewed Text

The skew property slants an item horizontally in one direction or the other based on an angle. Positive angles slant up to the left. Negative numbers slant up to the right.

This example uses a yoyo animation to skew the text back and forth between -20 and 20 degrees.

Vertical Skewing

The second story can be viewed by clicking the button labeled 2 under the editor. Vertical skewing is accomplished by skewing and rotating at about the same angle.

Up and Down

The third story shows that combining the skew and rotation properties can result in some interesting animation.

story = {
  item: {
    text:"skew x",
    init: {
      color:"#345",
      font:50,
      skew:-20
    },
    action:{
      anim:[3,"less curve inout",[1,'yoyo']],
      skew:20
    }
  }
};
story = {
  item: {
    text:"skew y",
    init: {
      color:"#345",
      font:50,
      skew:-20,
      rot:-15
    },
    action: {
      anim:[3,"less curve inout",[1,'yoyo']],
      skew:20,
      rot:15
    }
  }
};
story = {
  item: {
    text:"up-dn",
    init: {
      color:"#345",
      font:40
    },
    action: {
      anim:[5,"less elastic inout",[1,'yoyo']],
      skew:-360,
      rot:-180
    }
  }
};