Each example demonstrates how a property works. Some of them have multiple stories, which can be seen by clicking the buttons under the editor. The JSON in the editor may be changed which is a great way to learn how to use each of the properties.

  • Position Example

    A demonstration of how the position of an item can animate independently on the axes.  more ›

  • Opacity Example

    The opacity property can be used to set and animated the transparency of an item.  more ›

  • Bulleted Text Lines

    Text lines can be bulleted and there are a variety of bullet icons to select from.  more ›

  • Corners Example

    Each of the four corners may be rounded independently using the corners property  more ›

  • Size vs. Scale [2]

    Smaller items consume less memory than larger ones. They can be scaled larger, but will look pixelated.  more ›

  • Item Alignment [2]

    The anchor property may be used to easily align items on the x or y axis.  more ›

  • Crop Toggling

    Text is rotated within a layer that toggles between being cropped or not.  more ›

  • Transform Origin [2]

    Defines the point in 3D space in which transforms, such as rotation, are relative to.  more ›

  • Text Shadow [3]

    Animate one or more text shadows and use a shadow to form a text outline.  more ›

  • Skewed Text [3]

    Skewing text horizontally and vertically and adding rotation to get an interesting effect.  more ›

  • 3D Rotation [2]

    Rotating text in three dimensions showing the affect of perspective.  more ›

  • Image Item [2]

    An example of how easy it is to add an image to your story and make it bounce around.  more ›

  • Spinning Letters [3]

    Animated letters spinning around in 3D, independently, with and without a text shadow.  more ›

  • Property Class [2]

    Animation examples that use property classes to define named sets of property values that are used multiple times.  more ›

  • Word Wrapping [2]

    A demonstration that uses the text width property to induce and animate word wrapping.  more ›

  • Text Styles

    Text Styling can be changed at any time in the timeline, but the style will change instantly.  more ›

  • Text Alignment

    Traditional Text Alignment is used to left, right, center or justify the layout of the text in a paragraph.  more ›

  • Simple Scaling

    Scaling simply resizes an item. It is often performed quicly with hardware acceleration.  more ›

  • Padding Example

    Padding example.  more ›

  • Color Cycling [2]

    Demonstration of cycling through multiple colors, blending from each color to the next.  more ›

  • Box Shadows [2]

    The shadow property is used to create animated inset and drop shadows.  more ›

  • Border Patterns

    A simple animated demonstration of changing border patterns, colors and sizes.  more ›

[2] - Example contains two stories
[3] - Example contains three stories