Layer Motion

Layers are items that can be placed like any other item. However, layers may have child items whose placement is relative to the layer. Complex movement can be achieved by moving items on a layer while simultaneously moving the layer itself.

The first story moves a red square around in a cloverleaf pattern. This movement is accomplished with nested layers. The inner layer has a red background and the outer layer is transparent. Try changing "transparent" to "blue" and see what it looks like.

The canvas is using the default 16/9 aspect ratio. To make both layers square, they are sized with x and y values that are multiples of 9 and 16 repectively.

To view just the inner layer’s motion, disable the outer layer’s motion by changing the rotation from -360 to 0.

The inner layer is configured to rotate around a center point by positioning it -20 percent of the frame size, left of the outer layer’s center, and setting the transform origin 20% to the right. Because expanded properties are relative to the item’s top-left position, half of the layer’s size is added to the x and y values of the origin. Rotation around the z axis now moves the layer in a wide circle. The outer layer is configured similarly, but with opposite position and origin values.

To make the inner layer a circle instead of a square, add a corners property with a value of half of 16, the largest dimension.

init: {
  size: [9,16],
  corners:8,
  bg: "red",
  pos: -20,
  origin: {x:24.5,y:8, expand:true}
}

Three Dimensions

The second story can be viewed by clicking the button labeled 2 under the editor. It is similar to the first story but moves the inner layer up and down the z axis.

The third story can be viewed by clicking the button labeled 3 under the editor. It expands upon the second story by rotating the Pro logo in the opposite direction of the wobbling layer it is nested within. It also bounces the "STYLE" text on the layer.

story = {
  canvas: { padding:20, init:{bg:"#FFF"} },
	item:{
		itemType:"layer",
		init:{
			size: [36,64],
			pos: 20,
			bg: "transparent",
			origin: {x:-2,y:32, expand:true}
		},
		action: { anim:[10,"linear"], rot: -360 },
		items:[
			{
				itemType:"layer",
				init: {
					size: [9,16],
					bg: "red",
					pos: -20,
					origin: {x:24.5,y:8, expand:true}
				},
				action: { anim:[2,"linear",4], rot: 360 }
			}
		]
	}
};
story = {
  canvas: { padding:20, init:{bg:"#FFF"} },
	frame:{ aspectRatio:1.333 },
	item:{
		itemType:"layer",
		init:{
			corners:true,
			size:[100,100],
			rot:{x:40},
			bg:"rgba(255,255,255,0)"
		},
		scripts:[
			{
				action:{anim:[25,"linear"], rot:1080}
			},
			{
				actions:[
					{delay:5, anim:7, bg:"rgba(247,247,247,0.3)", shadow:[0,0,1,"#234"]},
					{delay:8, anim:3, bg:"rgba(255,255,255,0)", shadow:false}
				]
			}
		],
		items:[
			{
				itemType:"layer",
				init: { size:[18,24], shadow:[0,0,1,"#234"], corners:12 }
			},
			{
				itemType:"layer",
				init: { size:[15,20], pos:{z:55}, bg:"#678",border:"#234", corners:10	},
				action:{
					anim:[1,"sine inout",[24,'yoyo']],
					pos:{z:-200}
				}
			}
		]
	}
};
story = {
  canvas: { padding:20, init:{bg:"#FFF"} },
	frame:{ aspectRatio:1.333 },
	item:{
		itemType:"layer",
		init:{
			corners:true,
			size:[100,100],
			rot:{x:40},
			bg:"#FFF"
		},
		scripts:[
			{
				action:{anim:[25,"linear"], rot:1080}
			},
			{
				actions:[
					{delay:5, anim:7, bg:"#EEE", shadow:[0,0,1,"#234"]},
					{delay:8, anim:3, bg:"#FFF", shadow:false}
				]
			}
		],
		items:[
			{
				itemType:"image",
				src:"pro-1000x829.png",
				width:60,
				init: { pos:{z:5}	},
				action:{
					anim:[25,"linear"],
					rot:-1080
				}
			},
			{
				text:"STYLE",
				init:{font:12, pos:[0,50,21], opacity:0, color:"#FFF", textShadow:[0,0,0.5,"#234"]},
				actions:[
					{delay:6, anim:3, opacity:100},
					{delay:11, anim:3, opacity:0}
				],
				charAction:{
					anim:{dur:0.7, stagger:0.1, repeat:[25, 'yoyo']},
					pos:{z:40}
				}
			}
		]
	}
};