Crop Toggling

This example rotates some text around twice, using a linear timing function so the animation loops smoothly. After exactly one rotation, the crop property is set to true. This clips the text so it is not visible outside of the layer’s boundaries.

The crop property cannot be animated, since the value is true/false. There isn’t a halfway point. However, it can be scripted to change at a particular time, using the delay property, as this story demonstrates.

story = {
  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 }
  		}
	  }
	]
};