Cropped Layer

Layer cropping is an advanced technique which makes it look like there is a see-through moving item. However, it is an illusion. The moving item is a layer with it’s own content. The layer contains a text item that matches the one on the page, differing only by color.

Whenever the layer is repositioned, the text within the layer is also repositioned, but with exactly the opposite values. So, the text in the layer appears to not move at all relative to the page. The layer has it’s crop property set to true, so the text outside the layer is not visible.

Try changing the "Cropped Layer" text items in both places to different values and see what it looks like.

Classes

Since both the layer and the text in the layer are animating to and from the same values, classes are used, which avoids duplication and simplifies changes.

Bouncy Spot

The second story can be viewed by clicking the button labeled 2 under the editor. It extends the first story, moving the layer in two dimensions, with a bounce ease.

Magnifying Lens

The third story can be viewed by clicking the button labeled 3 under the editor. It makes some relatively minor changes to the second story to make it look like a magnifying lens.

Note: The text on the page is made blurry by setting the color to transparent, but with a drop shadow. Microsoft’s Internet Explorer and Edge browsers have a bug which doesn’t support this. To see the effect, use any other browser.

story = {
  classes: { 
    text: { font:70, style:"bold caps" },
    animation: { anim:[3,"sine inout",[1,'yoyo']] },
    x1: { pos:{x:-40}, class:"animation"},
    x2: { pos:{x:40}, class:"animation"}
  },
	frame:{ aspectRatio:5 },
	items:[
		{
			text:"Cropped Layer",
			init:{ color:"#EEE" }
		},
		{
			itemType:"layer",
			init:{
			  class:"x1",
			  crop:true,
			  size:[15,75],
			  border:[2,"#345"]
			},
			action:{class:"x2"},
			item:{
				text:"Cropped Layer",
				init:{ class:"x2", color:"#345" },
				action:{ class:"x1" }
			}
		}
	]
};
story = {
  classes: { 
    text: { font:45, style:"bold caps" },
    x1: {pos:{x:-37}}, x2: {pos:{x:37}},
    y1: {pos:{y:-24}}, y2: {pos:{y:24}},
    goBack: {anim:[3,"elastic"]},
    goDown: {anim:[3,"bounce"]},
    goRight: {anim:4}
  },
	canvas:{padding:10, init:{bg:"#FFE"}},
	frame:{setup:{aspectRatio:2}, init:{bg:"#666"}},
	items:[
		{
			text:["Layer", "Cropping"],
			init:{color:"#FFE"}
		},
		{
			itemType:"layer",
			init:{crop:true, size:[36,72], border:[1,"#0F0"], corners:36, bg:"#000", class:"x1,y1"},
			scripts:[
				{action:{class:"y2,goDown"}},
				{action:{class:"x2,goRight"}},
				{action:{delay:5, class:"x1,y1,goBack"}}
			],
			item:{
				text:["Layer", "Cropping"],
				init:{color:"#0F0", class:"x2,y2"},
				scripts:[
					{action:{class:"y1,goDown"}},
					{action:{class:"x1,goRight"}},
					{action:{delay:5, class:"x2,y2,goBack"}}
				]
			}
		}
	]
};
story = {
  classes: { 
    text: { font:36, style:"caps" },
    x1: {pos:{x:-37}}, x2: {pos:{x:37}},
    y1: {pos:{y:-24}}, y2: {pos:{y:24}},
    goBack: {anim:[3,"elastic"]},
    goDown: {anim:[3,"bounce"]},
    goRight: {anim:4}
  },
	frame:{setup:{aspectRatio:2}},
	items:[
		{
			text:["Layer", "Cropping"],
			init:{color:"transparent", textShadow:[0,0,4,"#666"]}
		},
		{
			itemType:"layer",
			init:{crop:true, size:[20,40], corners:36, bg:"#F7F7F7", class:"x1,y1", shadow:true},
			scripts:[
				{action:{class:"y2,goDown"}},
				{action:{class:"x2,goRight"}},
				{action:{delay:5, class:"x1,y1,goBack"}}
			],
			item:{
				text:["Layer", "Cropping"],
				init:{color:"#666", class:"x2,y2", font:38},
				scripts:[
					{action:{class:"y1,goDown"}},
					{action:{class:"x1,goRight"}},
					{action:{delay:5, class:"x2,y2,goBack"}}
				]
			}
		}
	]
};