SequenceEffect §

Groups other effects together but aligns them so they play one after another, after each one has completed all its' iterations.

Can be nested within other Sequences and Groups.
Can also nest Keyframes.


				new SequenceEffect(effects, options);

SequenceEffects have been removed from Level 1 of Web Animations and are planned to be reintroduced in Level 2 of the spec.
However they are implemented in the Web Animations polyfill.
I would recommend to be careful and use this without the options argument until L2 is drafted to work out the quirks.

Arguments §

§ effects: Array of Effects to sequence.
§ options: Similar Object properties as SequenceEffectOptions.

Recommended not to use this argument until L2 spec has been worked out.


				var effects = [Keyframe, Group, Sequence /*, ... */];
				var options = Number || SequenceEffectOptions || null;


				/// Create some example animation effects
				var foo = new KeyframeEffect(document.querySelector('div.foo'), [ { left: '0%' }, { left: '100%' } ], 500);
				var bar = new KeyframeEffect(document.querySelector('div.bar'), [ { left: '20%' }, { left: '80%' } ], 500);
				var group = new GroupEffect([
					new KeyframeEffect(document.querySelector('span.hello'), [ { fontSize: '10px' }, { fontSize: '18px' } ], 300),
					new KeyframeEffect(document.querySelector('span.world'), [ { fontSize: '8px' }, { fontSize: '18px' } ], 300)
				]);
				
				/// Sequence our effects together...
				var effects = [foo, bar, group];
				var sequence = new Sequence(effects);
				
				
				/// Play our sequence of effects
				var player = document.timeline.play(sequence);