Web Animations/Use cases

This is a collection of:

1. Real world use cases we want to be able to support with Web Animations
2. Simple example uses that we can use to validate the API

General use cases

Here are some things that are difficult with the current offerings and that this spec should address.

1. Animating a sequence
   • e.g. frame-based animation
     • Addressed by: time containers, ability to re-use animations
     • Just put the <img>s in a container, set time-container="seq", then use a CSS selector to target all the child elements with an animation that turns the visibility attribute on for a fraction of a second. (How it's currently done)
   • e.g. bullet-points on a slide
     • Addressed by: time containers, ability to re-use animations, UI event animation triggers
     • Similar to the frame-based animation example but you'd use CSS styling to applying the animation-time-container property to all <ul> elements on the slide, and use begin="click" to trigger the next animation in the sequence.
   • Syncing of independent timelines: http://mobiletest.host.adobe.com/w3c/Metro.html. Today CSS animations don't wait while JavaScript is running. This makes it impossible to do non-trivial animations.
2. Making a tool selection animation
   • You have three icons and a highlight that moves between them as each is clicked. Responds to click mid-way through transitions. (demo with only two icons)
   • Addressed by: state machine behaviour, UI event animation triggers, an animation 'object' that provides the ability to start/pause/seek an animation without the need for CSS style tricks
3. A portable cartoon
   • i.e. a fairly complex animation that tells a story, perhaps even has sound and subtitles, but which can be easily emailed to friends (and safely played in a mail client), included in a blog (via <img>), i.e. places where you can't execute script
   • Addressed by: synchronisation (possibly including time containers), integration with <audio>

jQuery examples

Moving clouds (http://themeforest.s3.amazonaws.com/116_parallax/tutorial-source-files/tut-index.html)

This is interesting because it's state-machine like, but basically faked. Here's the jQuery code for the animation:

$(document).ready(function() {  
	$('a.link').click(function () {  
		$('#wrapper').scrollTo($(this).attr('href'), 800);
		setPosition($(this).attr('href'), '#cloud1', '0px', '400px', '800px', '1200px')
		setPosition($(this).attr('href'), '#cloud2', '0px', '800px', '1600px', '2400px')
        //add this
		$('a.link').removeClass('selected');  
		$(this).addClass('selected');
        //end add this
		return false;  
	});  
});

Basically, the idea is that multiple scrolls occur at the same time. The timing is the same in every case, and the endpoints rely on the current location and destination. It'd be interesting to see how neat we could get this.

Glimmer

A graphical tool for generating jQuery code: http://visitmix.com/writings/glimmer-a-jquery-interactive-design-tool.

Here's an example of the output: http://visitmix.com/labs/glimmer/samples/freestyle.html.

This looks like a really great comparison for us to measure against with regards to building non-interactive animation using Web Animations primitives.