GroupEffect §

Groups other effects together and aligns them so they all start together at the same time.

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


				new GroupEffect(effects, options);

GroupEffects 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 group.
§ options: Similar Object properties as GroupEffectOptions.

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


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


				/// Create a dummy animation
				var target = document.querySelector('div.target');
				var frames = [
					{ opacity: 0 },
					{ opacity: 0.7 }
				];
				var keyframe = new KeyframeEffect(target, frames, 800);
				
				var sequence = new Sequence([
					new KeyframeEffect(document.querySelector('div.foo'), [ { left: '0%' }, { left: '100%' } ], 500),
					new KeyframeEffect(document.querySelector('div.bar'), [ { left: '20%' }, { left: '80%' } ], 500)
				]);
				
				/// Group our effects together...
				var effects = [keyframe, sequence];
				var group = new GroupEffect(effects);
				

				/// Play the group of effects
				var player = document.timeline.play(group);