Character Animation

Each character is animated independently around the x axis, with a delayed start of 0.12 seconds after the prior one.

Configuration

The story has two items. An image item displays an SVG line and is sized to 90 percent of the width of the frame. It’s properties are not changed with animation.

The text item is setup with the text “CHARACTER ANIMATION”.

Try changing it.

Animation

Since we are animating characters, we use charInit to initialize the properties directly on the characters and charAction to change them.

The stagger value defines the delay before subsequent characters begin. The repeat and yoyo values make the animation cycle back and forth eight times; the first time and seven repeats.

The first story uses the default font size. The second story uses short text so the font size is increased. The font property is not available at the character level, so it must be set in an init entry.

story = {
	items:[
		{
			text:"CHARACTER ANIMATION",
			charInit:{
				pos:{z:12},
				origin:[0,8,-6],
				color:"rgba(0,63,127,0.7)"
			},
			charAction:{
				anim:{ dur:4, stagger:0.12, repeat:[7, 'yoyo'], ease:"curve inout" }, 
				rotation:{x:720}
			}
		},
		{
			itemType:"image",
			setup:{src:"sep.svg", width:90},
			init:{pos:{z:5}}
		}
	]
};
story = {
	items:[
		{
			text:"ProStyle",
			init: { font: 30 },
			charInit:{
				pos:{z:30},
				origin:[0,20,-15],
				color:"rgba(22,33,44,0.7)"
			},
			charAction:{
				anim:{ dur:15, stagger:0.12, ease:"elastic in" }, 
				rotation:{x:-360}
			}
		},
		{
			itemType:"image",
			setup:{src:"sep.svg", width:90},
			init:{pos:{z:5}}
		}
	]
};