Overview

A property defines appearance or placement of a model object. Property values are initialized with an init entry and may be scripted to change over time. e.g. Rotation. There are also pseudo properties, which are similar to regular properties but instruct how to alter properties.

Values

Each property is composed of one or more values. For instance, the font property has both size and family values. A position has x, y and z dimensions. ProStyle allows you to set and animate individual property values separately or together. This enables you to create simple animations easily, yet provides the flexibility to craft complex ones.

Formats

Since you might only need to change a subset of a property’s values, there are different formats which make it easier to change particular values. The available formats for a property depends upon the set of values and the nature of the property. For instance, each of the following is a valid representation of a position.

position: {x:10, y:-20, z:30}
position: [10, -20, 30]
position: "10,-20,30"
position: {x:-10, y:-20}
position: [10, -20]
position: "10,-20"
position: 10
position: false

Object

A JSON object with named values. This format is the most descriptive because the name of each value is given, but that also makes it more verbose. It is usually best to use this format when you need to set a sparse set of values.

Array

A JSON array with all property values in a defined order. This format is concise since the values are provided by position rather than name. Properties that support this format expect the values in a particular order.

String

This format is a good choice when you only need to set one value. Some properties map the string to their dominant string based value, such as the font property’s family value, and any other values to defaults.

Number

This format is a good choice to set only a single number value, such as font size or opacity percent. Properties with a prominent numeric value map this format to that value and set any other values to defaults.

Boolean

This format is very handy to quickly turn a property off, or to turn it on with a default “on” configuration. For example, setting the border property to true sets a thin black border. Of course, true values don’t make much sense for some properties.

Which format should you use? That’s up to you. Generally, shorter formats improve readability, but that’s subjective. Use whichever format you prefer.

Pseudo-Properties

Most properties alter the appearance or placement of something. However, there are a few special cases that are a bit different. They are grouped together with regular properties because they are configured in the same manner, with init blocks and/or script actions.


Animation

The animation property defines the characteristics of an animation, such as how long it will take, or how many times it will repeat.

  • alias: anim

Values

duration

The time in seconds that the animation will take to complete. If the animation is configured to repeat, this is the time of one iteration.

  • default: 0
  • alias: dur

ease

The ease value defines the timing function, the direction and strength of the effect. As time elapses at a constant rate, the ease determines how far along the property values have progressed.

  • default: “expo”

repeat

How an animation should be repeated.

  • Count: The number of times the animation should be repeated. The first iteration is not a repeat. e.g. the animation will occur twice when the repeat count equals 1.
  • Direction: The pattern of direction that each iteration should be played. 'forward' indicates that the animation should be repeat exactly as the first iteration, forward only. 'yoyo' indicates that the direction should alternate back and forth. The ease will be played in reverse when returning. The values 'f' and 'y' may be used for brevity.
  • Delay: The number of seconds to wait between each iteration.

The count may be given as a lone number, of the count, direction and delay can be given as an array. e.g. [3,'y',0]

  • default: 0
  • alias: rep

stagger

If the model being animated contains multiple targets, such as text characters or chart bars, they may be staggered. Depending upon a chosen order, the first will start immediately. Each subsequent one will start after a defined delay.

  • Delay: The time in seconds to wait for the next target to begin
  • Order: Defines which target should start first, which next, and so on.
    • 'forward' They are processed in their default order
    • 'backward' Starting with the last one, moving toward the first
    • 'random' The targets are randomized
    • 'centerOut' Starting with the target(s) in the middle, working simultaneously toward the ends
    • 'outCenter' Starting at the two ends, working simultaneously toward the middle

The order may be given as 'f', 'b', 'r', 'c' or 'o' for brevity.

A lone number may be used to define the delay, and the order will defulat to 'forward'. Otherwise, an array be provided. e.g. [0.1,'random']

  • default: 0
  • alias: stag

Formats

object

Any combination of values. Omitted values will use defaults.

animation: {
  duration: 0.5, 
  ease: "less curve inout",
  repeat: [3, 'yoyo',0.1],
  stagger: [0.1, 'reverse']
}
anim: {dur:0.5, ease:"linear", rep:3, stag:0.1}

number

The number is applied to the duration value. The other values are set to defaults.

anim: 1.5

boolean

true sets the duration value to 1 second. The other values are set to defaults. false has no effect.

anim: true

array

Entries are applied to duration, ease, repeat and stagger in order. Defaults are used for missing entries. The repeat and stagger values can be expressed as a number or an array.

anim: [3, "more elastic", 1, 0.5]
anim: [3, "less curve inout", [1,'yoyo'], [0.5,'random']]

string

The string is applied to the ease value. The duration value is set to 1.

anim: "bounce"

Example

edit & play
{
  item:  {
    text:"scale",
    init: {color:"#234", font:70},
    actions: [
      {anim:2, scale:30},
      {anim:2, scale:false}
    ]
  }
}

Anchor

The anchor property defines the alignment of an item. Anchor values are a percentage of the item’s natural dimensions, the actual width and height. For example, the natural dimensions of a text item are affected by the border, the font, line wrapping due to the text width property, and so forth.

Values

x

A percentage of the natural width, offset from the horizontal center. The left edge is -50 and the right edge is 50.

  • default: 0

y

A percentage of the natural height, offset from the vertical center. The top edge is -50 and the bottom edge is 50.

  • default: 0

Formats

object

Any combination of values. Omitted values will use defaults.

anchor: {
  x: -50, 
  y: -50
}

number

The number is applied to the x value. The y value is not changed.

anchor: -50

string

The string is split at the comma. The first part, if present, is applied to the x value. The second part, if present, is applied to the y value. Subsequent entries are ignored. The first part may be left, center, right, l, c, or r. The second part may be top, middle, bottom, t, m, or b.

anchor: "left,top"

boolean

Setting the anchor to true changes the x value to -50 and y to 0. Setting the anchor to false changes both values to 0.

anchor: true

array

The first number, if present, is applied to the x value. The second number, if present, is applied to the y value. Values are set to 0 if not provided. Subsequent entries are ignored.

anchor: [-50,-50]

Example

edit & play
{
  classes: { 
    layer: {border: [3,"#234"], corners: true},
    l: { anim:2, anchor:[-50,0], pos:-35 },
    r: { anim:3, anchor:[50,0], pos:35 },
    c: { anim:2, anchor:false, pos:0 }
  },
  items:  [
    {
      itemType: "layer",
      init: {size: [20,20], pos:[0,-30]},
      actions: [{class:"l"}, {class:"r"},{class:"c"}]
    },
    {
      itemType: "layer",
      init: {size: [30,20]},
      actions: [{class:"l"}, {class:"r"},{class:"c"}]
    },
    {
      itemType: "layer",
      init: {size: [40,20], pos:[0,30]},
      actions: [{class:"l"}, {class:"r"},{class:"c"}]
    }
  ]
}

Background

The background property configures the look of the rectangular background of the canvas, frame, pages or items.

  • alias: bg

Values

color

A solid color. Any valid color string value may be given. If a number value is given, it will be mapped to the hue with 50% for saturation and lightness. This value may be animated with scripts.

  • default: 'transparent'

image

This value is assigned to the css background-image property. Images and gradients may be used. Images may be embedded with a data URI.

If a url() contains a relative path, it will be prepended with ProStyle.mediaRootUrl and/or the canvas mediaUrl if defined.

  • alias: img
  • default: undefined

aspectRatio

The aspect ratio of the image contents. The aspect ratio must be explicitly defined. It is not determined by the image file itself.

  • alias: ar
  • default: 1

layout

Defines how the image content is extended across the background surface.

'cover' - The image is stretched proportionally, maintaining the aspect ratio, to completely cover the background surface. If the surface has a different aspect ratio then some of the image will not be visible.

'contain' - The image is stretched proportionally, maintaining the aspect ratio, to cover as much of the background surface as possible. If the surface has a different aspect ratio then some of the surface will not be covered with the image.

'stretch' - The image is stretched to fit the defined width and height.

'stretch-w' - The image is stretched to fit the defined width. The height will be calculated proportionally using the aspect ratio.

'stretch-h' - The image is stretched to fit the defined height. The width will be calculated proportionally using the aspect ratio.

  • default: 'cover'

x

y

Defines the position of the image. By default, the image is centered on the background surface. The top-left corner is -50,-50 and the bottom right is 50,50.

  • default: 0,0

width

height

Defines the size of the image as a percentage of the background surface when the layout is 'stretch', 'stretch-w' or 'stretch-h'.

  • aliases: w, h
  • default: 100,100

repeat

Defines if the background image should be duplicated in a repeating pattern in one or both directions. The available values are 'repeat', 'repeat-x', 'repeat-y' and 'no-repeat'

  • alias: rep
  • default: 'no-repeat'

clip

Defines if the background image extents should include the border or not. The available values are 'border-box' to include the border and 'padding-box' to not include the border.

  • default: 'border-box'

Formats

object

Any combination of values. Omitted values will not be changed.

background: {
  color: "orange", 
  image: "url(texture.png)",
  aspectRatio: 1.33333,
  layout: "stretch",
  x: 0,
  y: 0,
  width: 50,
  height: 50,
  repeat: "repeat",
  clip: "padding-box"
}

string

If an image url or gradient is given, it is assigned to the image value. Otherwise, it is assigned to the color value.

bg: "red"

array

The entries map in order to the color, image, aspectRatio, layout, x, y, width, height, repeat and clip values.

bg: ['red', 'url(texture.png)', 1.3333, 'stretch', 0, 0, 50, 50, 'repeat', 'padding-box']

number

Updates the color value. The number represents the hue in a color wheel. The value is used in hsl() as the hue. The saturation and lightness are both set to 50%. Valid values range from 0 to 360, where 0 = red, 120 = green, 240 = blue, and 360 = red

bg: 120

boolean

true sets the color value to '#FFF'.
false sets it to 'transparent'.

bg: true

Example

undocumented


Border

The border property draws a line around the outer edge. The corners property may be used to round the corners.

Values

color

Any valid color may be used.

  • default: “transparent”

size

A percentage the height of the container (e.g. page).

  • default: 0

style

A string that describes how the border should be drawn. Valid values are solid, dashed, dotted, double, groove, ridge, inset, outset and none.

  • default: “none”

Formats

object

Any combination of values. Omitted values will not be changed.

border: {
  color: "red", 
  size: 5,
  style: "dotted"
}

number

The number is applied to the size value. The style will be solid and the color will be black.

border: 2

boolean

False sets the border values to the default values. True sets the size to 0.5, the style to solid and the color to black.

border: false
border: true

array

The first entry, if present, is applied to the size value. The second entry, if present, is applied to the color value. The third entry, if present, is applied to the style value. If the second or third entries are omitted, they will be set to black and solid. Subsequent entries are ignored.

border: [1,"purple","dashed"]

string

The string is applied to the color value. The style will be solid and the size will be 0.5.

border: "orange"

Example

edit & play
{
  item: {
    text:"border",
    init: { padding:5, corners:10, font:50, color:"#234"},
    actions:[
      { delay:1, border:{size:1,color:"#AAA",style:"dashed"}},
      { delay:1, border:{size:2,color:"#666",style:"dotted"}},
      { delay:1, border:{size:3,color:"#234",style:"solid"}},
      { delay:1, border:false}
    ]
  }
}

Bullets

The bullets property renders a graphical element on the left side of each line.

There are many styles of bullets.

"none"
"arabic-indic"
"armenian"
"bengali"
"cambodian"
"circle"
"cjk-ideographic"
"decimal"
"decimal-leading-zero"
"devanagari"
"disc"
"georgian"
"gujarati"
"gurmukhi"
"hebrew"
"hiragana"
"hiragana-iroha"
"kannada"
"katakana"
"katakana-iroha"
"khmer"
"lao"
"lower-alpha"
"lower-armenian"
"lower-greek"
"lower-latin"
"lower-roman"
"malayalam"
"mongolian"
"myanmar"
"oriya"
"persian"
"telugu"
"thai"
"tibetan"
"square"
"upper-alpha"
"upper-latin"
"upper-roman"

Values

style

One of the styles, listed above.

  • default: “none”

Formats

object

Since this property has only one value, it is more common to use the string format.

bullets: { style: "disc" }

string

The name of the style from the list above.

bullets: "disc"

boolean

False sets the value to “none”. True sets the value to “disc”.

bullets: false
bullets: true

number

The number before the entry in the list above.

bullets: 10

array

The first entry in the array, if present, is applied to the style value. Subsequent entries are ignored.

bullets: ["disc"]

Example

edit & play
{
  item: {
    text: [
      "Lorem ipsum dolor sit amet",
      "Consectetur adipiscing elit",
      "Sed do eiusmod tempor",
      "Incididunt ut labore",
      "Et dolore magna aliqua"
    ],
    linesInit: { bullets:"disc", color:"#234"},
    lineActions:[
      {
        anim:{dur:1, stagger:0.2},
        bullets:"circle"
      },
      {
        anim:{dur:1, stagger:0.2},
        bullets:false
      },
      {
        anim:{dur:1, stagger:0.2},
        bullets:"disc"
      }
    ]
  }
}

Class

Use a class to define property values once and reuse them in multiple places. Classes may be used in init blocks and in script actions.

The property values defined in a classes do not necessarily need to be aligned to a particular model object or property set. A class may define any arbitrary set of properties. It might contain only a subset of a model object’s properties, or might contain properties for multiple model objects. A model object will use the properties it understands and simply ignore the rest.

Each model object has a default class name. For example, if you define a class named text then all text items will pick up those values without needing to associate the class with each item. However, you can create classes with other names and then explicitly associate them using the class property.

Formats

string

The name of the class. There must be a matching entry in the classes entry.

class: "label"

Example

edit & play
{
  classes: {
    label: { 
      border: "blue",
      corners:10,
      font:15,
      color:"blue",
      padding: 3
    }
  },
  items: [
    {
      text:"One",
      init: { class:"label", pos:[0,-15] }
    },
    {
      text:"Two",
      init: { class:"label", pos:[0,15] }
    }
  ]
}

Corners

The corners property defines whether each corner is rounded or comes to a point.

Each corner radius is a percentage of the height of the container the item is within. They are not a percentage of the dimensions of the item itself, by design. For example, a text item might have its textWidth property set, which causes word wrapping. Regardless of how many lines of text are wrapped, the corner radii will stay consistent, because the containing page dimensions do not change.

Values

topLeft

Radius of the corner, as a percentage of the container’s height. A value of 0 brings the corner to a point.

  • default: 0
  • alias: tl

topRight

Radius of the corner, as a percentage of the container’s height. A value of 0 brings the corner to a point.

  • default: 0
  • alias: tr

bottomRight

Radius of the corner, as a percentage of the container’s height. A value of 0 brings the corner to a point.

  • default: 0
  • alias: br

bottomLeft

Radius of the corner, as a percentage of the container’s height. A value of 0 brings the corner to a point.

  • default: 0
  • alias: bl

Formats

object

Any combination of values. Omitted values will not be changed.

corners: {
  topLeft: 5, 
  topRight: 10,
  bottomRight: 15,
  bottomLeft: 20
}

number

The number is applied to all four corners.

boolean

False sets all corner radii to the default values. True sets all corner radii to 3.

corners: false
corners: true

array

One to four numbers may be passed as an array.

corners: [5,30]

One number provided It will be applied to all four corners.

Two numbers The first will be applied to topLeft and bottomRight, and the second will be applied to topRight and bottomLeft.

Three numbers The first will be applied to topLeft. The second will be applied to topRight and bottomLeft. The third will be applied to bottomRight.

Four numbers They will be applied to topLeft, topRight, bottomRight, bottomLeft in order.

string

The string is split at the commas and then processed like an array.

corners: "5,30"

Example

edit & play
{
  item: {
    text:"corners",
    init: {
      padding:5,
      border:[1, "#234"],
      font:40,
      color:"#234"
    },
    actions:[
      { anim:2, corners:15},
      { anim:2, corners:[40,10,30,5]},
      { anim:2, corners:{bottomRight:5}},
      { anim:2, corners:[10,40]},
      { anim:2, corners:false}
    ]
  }
}

Crop

The crop property determines whether a container’s content is visible outside of its boundaries. For instance, if a layer contains a text item, and the text item is positioned partly beyond the layer’s bounds, should it appear cut off or display normally?

Cropping may cause 3D rendering to appear flat, per the CSS Transforms Specification as implemented by the browser.

Values

crop

A true/false value that indicates whether the content outside of a container’s edge should be hidden.

  • default: false

Formats

object

Since this property has only one value named the same as the property, it is more common to use the boolean format.

crop: { crop: true }

boolean

true indicates that the content should be clipped at the container’s edge. false indicates the content should be visible even if it is completely outside of the container’s bounds.

crop: true

Example

edit & play
{
  classes: { 
  },
	items:[
	  {
	    itemType: "layer",
	    init: { bg: "#F7F7F7", size:[100,25] },
	    actions:[
	      { delay:3, crop:true }
	    ],
	    item: {
  			text:"ProStyle",
  			init: { color:"#234", font:25 },
  			action: { anim:[6, "linear"], rot:720 }
  		}
	  }
	]
}

Data

The data property is used to pass one or more arrays of data. The structure of the data and how it will be used are specific to the model object that consumes it.

Values

values

One or more sets of data, as an array of numbers or an array of arrays of numbers.

  • default: []

Formats

object

Since this property has only one value, it is more common to use the array format.

data: { values: [1,2,3] }

array

An array of numbers or an array of arrays of numbers to be assigned to values.

data: [1,2,3]
data: [[1,2,3],[4,5,6]]

boolean

false clears the data, setting it to an empty array. true is undefined.

data: false

Example

edit & play
{
	item: {
		itemType: "barChart",
		setup: { bars:7, domain:7, margin:7 },
		barsInit: { fill:"#567" },
		barActions: [
			{ anim:3, data:[1,2,3,4,5,6,7]	},
			{ anim:1, data:false }
		]
	}
}

Delay

The delay property inserts a pause into an action before the action begins. It is not valid for init entries. If the action performs an animation the delay is performed first and then the animation begins. The duration of an action is the sum of its delay and its animation.

Formats

number

The number of seconds to wait until an action begins.

delay: 1.5

Example

edit & play
{
  item: {
    text: "Style",
    actions:[
      {delay:1, style:"bold"},
      {delay:1, style:"italic"},
      {delay:1, style:"under"}
    ]
  }
}

Fill

The fill property defines the color used to fill part of an item that is created with scalable vector graphics.

Values

color

A color.

  • default: black

Formats

object

Since this property has only one value, it is more common to use the string format.

fill: { color: "red" }

string

The string is applied to the color value.

fill: "red"

number

The number represents a hue in a color wheel. The value is added to hsl() as the hue. The saturation and lightness are both set to 50%. Valid values range from 0 to 360, where 0 = red, 120 = green, 240 = blue and 360 = red.

fill: 120

boolean

false removes any previous setting. true sets the color value to white.

fill: false
fill: true

array

undocumented

Example

edit & play
{
	item: {
		itemType: "barChart",
		setup: { bars:7, domain:7, margin:7 },
		barsInit: { fill:"#567" },
		barActions: [
			{ anim:3, data:[1,2,3,4,5,6,7]	},
			{ anim:1, data:false }
		]
	}
}

Font

The font property is used to set the typeface and line size of rendered text.

Modern web browsers generally support a standard set of font faces, commonly referred to as web safe fonts. Any of these fonts may be used. Furthermore, any external font faces may be loaded in the HTML and used, such as those at Google Fonts.

While it is possible to animate the size and lineHeight values, it is a relatively high computational process to render text, and might result in jerky animation. For better performance, define the font properties once and then use the scale property.

Values

size

A percentage of the height of the page. Note that the font size is set to the given value, but that is not necessarily the actual size of the rendered glyphs, due to the characteristics of the font family.

  • default: 12

family

A string that instructs the browser which font family to use. It is good practice to include multiple fonts, comma-separated, as a fallback in case the requested font is not available.

  • default: “Arial, Helvetica, sans-serif”
  • alias: face

lineHeight

Defines the height of each line of text, as a percentage of the font size.

  • default: 120
  • alias: lh

Formats

object

Any combination of values. Omitted values will not be changed.

font: {
  face: "Comic Sans MS, cursive, sans-serif", 
  size: 30,
  lh: 150
}

number

The number is applied to the size value. The other values are not changed.

font: 24

string

The string is applied to the family value. The other values are not changed.

font: "Times New Roman, Times, serif"

array

The array entries are assigned in order to the size, family and lineHeight values. Missing entries are assigned default values. Subsequent entries are ignored.

font: [28, "Tahoma, Geneva, sans-serif", 140]

boolean

False sets the values to their defaults, essentially turning off any previous settings. True has no effect.

font: false

Example

edit & play
{
  item:  {
    text:"font",
    init: {
      pos:[-50,-50], anchor:[-50,-50],
      origin:[-50,-50], color:"#234",
      font:30, scale:100
    },
    action: {
      anim:{ dur:5, rep:1, yoyo:true },
      scale:1000
    }
  }
}
edit & play
{
  item:  {
    text:"font",
    init: {
      pos:[-50,-50], anchor:[-50,-50],
      origin:[-50,-50], color:"#234",
      font:30, scale:100
    },
    action: {
      anim:{ dur:5, rep:1, yoyo:true },
      scale:1000
    }
  }
}

Move To

undocumented

Values

undocumented

Formats

undocumented

Example

undocumented


Opacity

The opacity property determines how transparent the target is. Hardware acceleration is used when available, so the animation is usually quite smooth.

  • alias: opac

Values

percent

Use any number between 0 and 100. A value of 0 makes the target invisible. A value of 50 makes the target semi-transparent.

  • default: 100
  • alias: pct

Formats

object

Since this property has only one value, it is more common to use the number format.

opacity: { percent: 50 }
opac: { pct: 50 }

number

Applies the percentage directly to the percent value.

opacity: 50

boolean

Setting the opacity to either true or false results in a percentage value of 100 being applied. The reasoning is that setting a value of false could be interpreted as turning the opacity property off, as in remove any prior opacity value. Setting the opacity to true is almost nonsensical. The only thing is could reasonably mean is make it completely opaque.

opacity: false
opacity: true

array

The first number, if present, is applied to the percentage value. The Subsequent entries are ignored.

opacity: [50]

string

The string is converted to a number and applied to the percent value.

opacity: "50"

Example

edit & play
{
  items:[
    {
      text:"UNDER",
      init: {color:"#234",style:"bold",font:45}
    },
    {
      text:"OVER",
      init: {color:"orange",style:"bold",font:55},
      actions:[
        {delay:1, anim:2, opacity:0},
        {anim:2, opacity:false}
      ]
    }
  ]
}

Padding

The padding property defines how much extra space appears between a target’s edge and the content within. Padding can be defined on any or all of the four sides. The top and bottom values are a percentage of the height of the container. e.g. item on a page. The left and right values are a percentage of the width of the container.

Values

left

A percentage of the container’s width.

  • default: 0
  • alias: l

top

A percentage of the container’s height.

  • default: 0
  • alias: t

right

A percentage of the container’s width

  • default: 0
  • alias: r

bottom

A percentage of the container’s height.

  • default: 0
  • alias: b

Formats

object

Any combination of values. Omitted values will not be changed.

padding: {
  left: 5, 
  top: 10,
  right: 15,
  bottom: 20
}

number

The number is applied to all four sides.

padding: 10

boolean

False sets all four sides to the default values. True sets all four sides to 2.

padding: false
padding: true

array

One to four numbers may be passed as an array.

One number provided It will be applied to all four sides.

Two numbers The first will be applied to top and bottom, and the second will be applied to right and left.

Three numbers The first will be applied to top. The second will be applied to right and left. The third will be applied to bottom.

Four numbers They will be applied to top, right, bottom, left in order.

padding: [15,12]

string

The string is split at the commas and then processed like an array.

padding: "5,30"

Example

edit & play
{
  item: {
    text:"padding",
    init: {
      border:[2,"#234"],
      font:30,
      color:"#234"
    },
    actions:[
      { anim:2, padding:5},
      { anim:2, padding:[0,0,20,0]},
      { anim:2, padding:{right:10}},
      { anim:2, padding:[20,10]},
      { anim:2, padding:false}
    ]
  }
}

Position

The position property determines where a target object is located in 3D space. The X axis extends from left to right, and the Y axis extends from top to bottom. Also, an imaginary Z axis extends from behind the screen, through the screen, to in front of it. All three axes intersect in the middle of the page.

Unlike standard web animation, ProStyle uses center alignment. See Alignment and Origins. The position defines where the target’s anchor is, which by default is at the center of the target’s dimensions.

Hardware acceleration is used when available, so the animation is usually quite smooth.

  • alias: pos

Values

x

A percentage of the container’s width. Position 0 is at the horizontal center of the container. The left edge of the container is -50, and the right edge is 50.

  • default: 0

y

A percentage of the container’s height. Position 0 is at the vertical center of the container. The top edge of the container is -50, and the bottom edge is 50.

  • default: 0

z

A percentage of the container’s combined width and height (Euclidean). Negative values position the target further away, behind others, so they will appear smaller. Positive values position the target closer, so they will appear larger.

  • default: 0
  • alias: ...

Formats

object

Any combination of values. Omitted values will not be changed.

pos: { z:10 }
position: {
  x: -25, 
  y: 25,
  z: 5
}

array

The first three numbers are applied to x, y and z in order. Missing entries are set to 0.

position: [25,25]
position: [0,0,10]

number

The number is applied to the x value. The y and z values are not changed.

position: 25

boolean

False sets the values to their defaults. True has no effect.

position: false

string

The string is split at commas and then processed as an array .

position: "0,0,10"

Example

edit & play
{
  item:  {
    text:"pos",
    init: {
      color:"#234",
      font:25,
      pos:[-20,-20,20]
    },
    actions: [
      {anim:1, pos:{z:-20}},
      {anim:1, pos:{x:20}},
      {anim:1, pos:{z:20}},
      {anim:1, pos:{y:20}},
      {anim:1, pos:{z:-20}},
      {anim:1, pos:{x:-20}},
      {anim:1, pos:{z:20}},
      {anim:1, pos:{y:-20}}
    ]
  }
}

Rotation

The rotation property turns a target object in 3D space. There are three axes. The X axis extends horizontally, the Y axis extends vertically, and the Z axis extends from back to front. The position in which all three axes intersect is called the transform origin. By default, it is located in the center of the target object, but can be adjusted with the transformOrigin property. See Alignment and Origins.

Standard two dimensional rotation is the equivalent of rotating around the z axis in 3D. Picture an axis line poking perpendicularly through the center of an image, and then the image rotating around that z axis. With ProStyle, you can rotate around all three axes independently. Some visually attractive effects can be achieved by rotating along all three axes, but in different scripts, at different speeds.

Values are always absolute angles, in degrees. They are not added to any existing values. The property is therefore named rotation, not rotate, since the latter might incorrectly hint that it is relative. Nevertheless, rotate can be used as an alias, but the values are always absolute.

When animating, ProStyle will tween from the current rotation to the new one. For example, an object rotated 360 degrees will look the same as if it were rotated 0 degrees. However, when animating, it will rotate around one revolution. To turn it two times, counterclockwise, you could set the rotation to -720.

Hardware acceleration is used when available, so the animation is usually quite smooth.

  • alias: rot
  • alias: rotate

Values

x

The number of degrees of rotation around the horizontal x axis.

  • default: 0

y

The number of degrees of rotation around the vertical y axis.

  • default: 0

z

The number of degrees of rotation around the z axis. Positive numbers are clockwise and negative numbers are counterclockwise.

  • default: 0

Formats

object

Any combination of values. Omitted values will not be changed.

rot: { y:45 }
rotation: {
  x: 180, 
  y: 180,
  z: -180
}

array

The first three numbers are applied to x, y and z in order. Missing entries are set to 0.

rotation: [180,-180,180]
rotation: [-45,90]

number

The number is applied to the z value, like standard two dimensional rotation. The x and y values are set to 0.

rotation: 45

boolean

False sets the values to their defaults. True sets x and y to 0 and z to 360.

rotation: false

string

The string is split at commas and then processed as an array .

rotation: "180,-180,180"

Example

edit & play
{
  classes: { text:{color:"#234", font:20}},
  frame: { aspectRatio:0.8},
  items: [
    {
      text:"x axis",
      init:{class:"text", pos:{y:-35}},
      action:{anim:[3,"linear"], rot:{x:360}}
    },
    {
      text:"z axis",
      init:{class:"text", pos:{y:-5}},
      action:{anim:[3,"linear"], rot:360}
    },
    {
      text:"y axis",
      init:{class:"text", pos:{y:25}},
      action:{anim:[3,"linear"], rot:{y:360}}
    }
  ]
}

Scale

The scale property stretches the target in x and y directions. Hardware acceleration is used when available, so the animation is usually quite smooth. However, the target will look increasingly pixelated with larger scale values.

The actual width and height of a target is referred to as its natural dimensions. The way the size is determined is specific to the type of the target. For instance, the text item uses a font property, which has values that determine the height of each text line. The textWidth property might induce line wrapping. Those properties and others, such as border and padding, contribute to the natural dimensions of the item.

Values

x

A percentage of the natural width.

  • default: 100

y

A percentage the natural height.

  • default: 100

Formats

object

Any combination of values. Omitted values will not be changed.

scale: {
  x: 200, 
  y: 75
}

number

The number is applied to both dimensions.

scale: 150

boolean

False sets the scale to 100 for both dimensions, essentially turning off scaling. True sets the scale to 200 for both dimensions, double the natural size.

scale: false
scale: true

array

The first number, if present, is applied to the x value. The second number, if present, is applied to the y value. Subsequent entries are ignored.

scale: [200,75]

string

The string is split at the comma. The first number, if present, is applied to the x value. The second number, if present, is applied to the y value. Subsequent entries are ignored.

scale: "200,75"

Example

edit & play
{
  item:  {
    text:"scale",
    init: {color:"#234", font:70},
    actions: [
      {anim:2, scale:30},
      {anim:2, scale:false}
    ]
  }
}

Shadow

The shadow property adds one or more shadows to the surrounding box. Shadows may be standard drop shadows, outside the box. They may also be inset, inside the surrounding box, which appear like a cutout hole.

The shadow gives the appearance of depth. However, it is rendered on the same two dimensional plane as the target. If you rotate the target, for instance, the shadow rotates with it. See 3D.

  • alias: shadows

Values

x

A percentage of the average of the container’s width and height. Negative numbers draw the shadow to the left of the target. Positive numbers draw the shadow to the right of the target.

  • default: 0

y

A percentage of the average of the container’s width and height. Negative numbers draw the shadow above the target. Positive numbers draw the shadow below target.

  • default: 0

blur

A percentage of the average of the container’s width and height. Zero sets no blur. Larger numbers provide more blur.

  • default: 0

color

The color of the shadow.

  • default: “rgba(0,0,0,0.7)”

spread

A percentage of the average of the container’s width and height. Spread causes the shadow to be larger or smaller than it would be otherwise. Zero makes the shadow the same size as the target. Negative values make a smaller shadow. Positive values make a larger shadow.

  • default: 0

inset

False for a standard drop shadow. True for an inner shadow.

  • default: false

Formats

object

Any combination of values. Omitted values will be set to the default.

shadow: { 
  x:0.5,
  y:0.5,
  blur:2,
  color:"black",
  spread:1,
  inset:true
}

boolean

False removes any previous shadow. True sets the x and y values to 0.5 and the blur value to 2. The other values will be set to the defaults.

shadow: false
shadow: true

number

The number is applied to the x and y values. The blur value will be set to 2. The other values will be set to the defaults.

shadow: 2

array

The array may contain a single or multiple shadows. If the first entry is a number, is will be processed as a single shadow. Otherwise, it will be processed as many. For a single shadow, the entries in order are set to the x, y, blur, color, spread and inset values. Omitted values are set to the defaults.

shadow: [1,1,2,"black",2,true]

For multiple shadows, each entry describes a shadow as an array, object, or string. Shadows will be rendered in order.

shadow: [[0,0,5,"black",2,true],[1,1,2,"black",0,false]]

string

The string is split at the commas and processed as an array.

shadow: "1,1"

Example

edit & play
{
  item:{
    text:"Shadow",
    init: {
      color:"#FFF",
      bg:"#234",
      font:35,
      padding:true,
      corners:true,
      shadow:[2,2,5,"black",0]
    },
    actions:[
      { anim:1,
        pos:[-3,-3],
        scale:105,
        shadow:[5,5,7,"rgba(0,0,0,0.8)",-1]
      },
      { anim:1,
        pos:false,
        scale:false,
        shadow:[2,2,5,"black",0]
      }
    ]
  }
}

Size

undocumented

Values

undocumented

Formats

undocumented

Example

undocumented


Skew

The skew property applies a left or right slant to the target. Hardware acceleration is used when available, so the animation is usually quite smooth.

ProStyle only supports skewing in the horizontal direction, but vertical skewing can be emulated by skewing horizontally and also rotating.

Values

degrees

An angle. Negative values move the bottom towards the left. Positive values move the bottom towards the right. Skewing beyond -90 or 90 flips the target over.

  • default: 0
  • alias: deg

Formats

object

Since this property has only one value, it is more common to use the number format.

skew: { degrees: 45 }

number

The number is applied to the x value.

skew: 45

boolean

False sets the degrees value to 0, essentially turning off skewing. True sets the degrees value to -30.

skew: false
skew: true

array

The first number, if present, is applied to the degrees value. Subsequent entries are ignored.

skew: [45]

string

The string is applied to the degrees value.

skew: "45"

Example

edit & play
{
  item: {
    text:"skew x",
    init: {
      color:"#234",
      font:55,
      skew:-20
    },
    action:{
      anim:[3,"less curve inout",1,0,true],
      skew:20
    }
  }
}
edit & play
{
  item: {
      text:"skew y",
      init: {
        color:"#234",
        font:55,
        skew:-20,
        rot:-15
      },
      action: {
        anim:[3,"less curve inout",1,0,true],
        skew:20,
        rot:15
      }
    }
}

Text Align

The textAlign property positions the contents of rendered lines of text, relative to each other.

  • alias: align

Values

align

left, center, right or justify. The beginning of a word may also be used. e.g. c for center.

  • default: undefined

Formats

object

Since this property has only one value, it is more common to use the string format.

textAlign: { align: "justify" }
align: { align: "j" }

string

The string is applied to the align value.

align: "center"

boolean

False removes any previous setting. True sets the align value to justify.

align: false
align: true

number

1 = left 2 = center 3 = right 4 = justify

align: 4

array

The first entry, if present, is applied to the align value.

align: ["right"]

Example

edit & play
{
  item: {
    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
    init: {
      color:"#234",
      textWidth:90,
      font:7
    },
    actions:[
      {delay:1, align:"c"},
      {delay:1, align:"r"},
      {delay:1, align:"j"},
      {delay:1, align:"l"},
    ]
  }
}

Text Color

The textColor property defines the color of text.

  • alias: color

Values

color

A color.

  • default: black

Formats

object

Since this property has only one value, it is more common to use the string format.

textColor: { color: "rgb(255,191,0)" }
color: { color: "red" }

string

The string is applied to the color value.

color: "red"

number

The number represents a hue in a color wheel. The value is added to hsl() as the hue. The saturation and lightness are both set to 50%. Valid values range from 0 to 360, where 0 = red, 120 = green, 240 = blue and 360 = red.

color: 120

boolean

false removes any previous setting. true sets the color value to white.

color: false
color: true

array

undocumented

Example

edit & play
{
  item: {
    text: "COLOR",
    init: {color:"red", font:40, style:"bold"},
    actions:[
      {anim:3, color:"#234"},
      {anim:3, color:"rgba(127,127,15,0.8)"},
      {anim:3, color:"red"}
    ]
  }
}

Text Shadow

The textShadow property adds one or more shadows to the text itself. Text shadows are very similar to box shadows, however the spread and inset values are not supported.

The shadow gives the appearance of depth. However, it is rendered on the same two dimensional plane as the text. If you rotate the text, for instance, the shadow rotates with it. See 3D.

  • alias: textShadows

Values

x

A percentage of the average of the page’s width and height. Negative numbers draw the shadow to the left of the text. Positive numbers draw the shadow to the right of the text.

  • default: 0

y

A percentage of the average of the page’s width and height. Negative numbers draw the shadow above the text. Positive numbers draw the shadow below text.

  • default: 0

blur

A percentage of the average of the page’s width and height. Zero sets no blur. Larger numbers provide more blur.

  • default: 0

color

The color of the shadow.

  • default: “rgba(0,0,0,0.7)”

Formats

object

Any combination of values. Omitted values will be set to the default.

textShadow: { 
  x:0.5,
  y:0.5,
  blur:2,
  color:"black"
}

boolean

False removes any previous shadow. True sets the x and y values to 0.5 and the blur value to 2. The color will be set to the default.

textShadow: false
textShadow: true

number

The number is applied to the x and y values. The blur value will be set to 2. The color will be set to the default.

textShadow: 2

array

The array may contain a single or multiple shadows. If the first entry is a number, is will be processed as a single shadow. Otherwise, it will be processed as many. For a single shadow, the entries in order are set to the x, y, blur, and color values. Omitted values are set to the defaults.

textShadow: [1,1,2,"black"]

For multiple shadows, each entry describes a shadow as an array, object, or string. Shadows will be rendered in order.

textShadow: [[-0.5,-0.5,0,"white"],[1,1,2,"black"]]

string

The string is split at the commas and processed as an array.

textShadow: "1,1"

Example

edit & play
{
  item:{
    text:"TEXT",
    init: {
      color:"#FFF",
      font:60,
      textShadow:[0,0,3,"#234"]
    },
    charAction: {
      anim:[1,"less curve inout",1,0,true,0.2],
      textShadow:[0,0,10,"#234"],
      scale:103
    }
  }
}

Text Style

The textStyle property defines how text is visually augmented. This is generally done to call attention to it.

  • alias: textStyles
  • alias: styles
  • alias: style

Values

bold

If true, the text is rendered thicker.

italic

If true, the text is rendered slanted.

line

One or more of "underline", "line-through", or "overline". If multiple are given, they should be separated by a space.

  • default: "none"
  • alias: lines

smallCaps

If true, all non-capital letters will be rendered as capital, but smaller than the normal capitals.

  • alias: caps

Formats

object

Any combination of values. Omitted values will not be changed.

style: { 
  bold: true,
  italic: true,
  line: "underline",
  caps: true 
}

string

The string is parsed for any combination of the words "bold", "italic", "caps", "under", "through", or "over". For those that are found, the matching style is enabled, and all others are disabled.

style: "bold italic"

boolean

false removes any previous styling. true sets the styling to bold and italic.

style: false
style: true

number

The number represents bit flags. Add up any of the following numbers to enable the corresponding styles. A value of 0 equals no styling. 1 = bold 2 = italic 4 = small caps 8 = underline 16 = strike through 32 = overline

style: 3

array

Any number of "b", "i", "c", "u", "t", or "o" may be given, corresponding to bold, italic, caps, underline, through, and overline.

style: ["b", "i"]

Example

edit & play
{
  item: {
    text: "Style",
    init: {font:40},
    actions:[
      {delay:1, style:"bold"},
      {delay:1, style:"italic"},
      {delay:1, style:"under"},
      {delay:1, style:"through"},
      {delay:1, style:"over"},
      {delay:1, style:"caps"},
      {delay:1, style:false}
    ]
  }
}

Text Width

The textWidth property defines the maximum width of a text item. The natural width of text depends on the font values and the set of characters. If a text width is defined that is shorter than the natural width, that which don’t fit will wrap to the next line.

  • alias: width

Values

width

A percentage of the page width.

Formats

object

Since this property has only one value, it is more common to use the number format.

textWidth: { width: 50 }

number

The number is applied to the width value. Since the property also has an alias that is the same name as the only property, it is quite intuitive to use this format with the alias.

width: 50

boolean

false removes any previous width, and the text will extend as far as needed. true sets the width to 100.

width: false
width: true

string

The string is converted to a number and applied to the width.

width: "50"

array

The first entry is applied to the width. Additional entries are ignored.

width: [50]

Example

edit & play
{
  item: {
    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
    init: {
      border:0.1,
      padding:5,
      font:5,
      width:100,
      pos:[-50,-50],
      anchor:[-50,-50]
    },
    action: {
      anim:{ dur:4, rep:1, yoyo:true }, 
      width:60
    }
  }
}

Transform Origin

The transformOrigin property defines the reference point when transforming a target object. By default, the origin is centered on the item, with the values [0,0,0]. Like this, an item will rotate around its center. Values of [-50,-50] represent the item’s top-left corner. Optionally, the expand value may be set to use an origin relative to the item’s container.

Like the anchor property, the values are a percentage of the target’s dimensions. However, transformOrigin and anchor serve two very distinct purposes. See Alignment.

  • alias: origin

Values

x

A percentage of the item’s width. Position 0 is at the horizontal center of the item. The left edge of the container is -50, and the right edge is 50.

  • default: 0

y

A percentage of the item’s height. Position 0 is at the vertical center of the item. The top edge of the item is -50, and the bottom edge is 50.

  • default: 0

z

A percentage of the container’s combined width and height (Euclidean). Negative values position the target further away, behind others, so they will appear smaller. Positive values position the target closer, so they will appear larger.

  • default: 0

expand

By default, the x and y values are percentages of the item’s dimensions. Setting expand to true changes it so they are percentages of the container’s dimensions, usually the page.

Expanded origins are percentages of the container’s dimensions, but they are relative to the top-left corner of the item, not the item’s center. To make it look right, You may need to compensate by adding half of the item’s percentage-based width and height to the x and y values.

expand has no effect on the z value, which is always based on the container’s dimensions.

  • default: false

Formats

array

Any combination of values. Omitted values will not be changed.

origin: { 
  x:-50,
  y:-25,
  z: 10,
  expand: true 
}

array

The first three numbers are applied to x, y and z in order. Missing entries are set to 0. expand is set to false.

origin: [25,25]

array

expand is set to false.

origin: -50

array

A value of false resets the values to [0,0,0]. expand is set to false.

origin: false

Example

edit & play
{
  classes: { 
    text: { pos:{z:40}, origin:{z:-40}, font:40 }
  },
  frame: { aspectRatio:1 },
  items: [
    { text:"X",
      init: {
        class:"text",
        color:"rgba(0,127,127,0.8)"
      },
      action: {anim:[5,"linear"], rot:{x:360}}
    },
    { text:"Y",
      init: {
        class:"text", 
        color:"rgba(127,0,0,0.8)",
        rot:{y:-180}
      },
      action: {anim:[5,"linear"], rot:{y:180}}
    }
  ]
}