Synchronization

How to keep multiple animations in sync

One of the problems with current animations (both SMIL and CSS) is that they will continue running during a callback. This makes precise timing impossible so only slow moving animations can be created. I propose to add 2 new behaviors to the animation model to address this.

Animation freezing during callbacks

With current CSS, the callback is made asynchronous so the next animation cycle might already be in progress. In addition, other animations that you might want to change, will also have changed. We should add new events (or add a new keyword) that signals the browser that we want synchronous behavior. The current browser model has performance and architecture issues with synchronous events so it will be easiest if the browser just pauses the animation when the event triggers and resumes it after the callback is handled.

This does introduce subtle issues because the pausing will cause the animation to fall behind other animations, video or sound. To counteract this, the browser will have to fast-forward the paused animation when it resumes. (If this causes other event to trigger, they will need to be called as well)

It would be great if there was a way to set events on partial completion of a transition. (ie call me when the animation is 50% done)

Grouping animations

Animation freezing helps if you want to just be sure of the state of one animation. However, what if you want to change a nested or sibling animation during a callback? If they don't stop as well, you can't be sure of their state. This means that they need to stop as well.

We could define a model where ALL animations on a page would pauze, but that seems heavy handed. In its place, I propose that we introduce a new keyword (animation-group) that allows you to group animations. During the event handling phase of a group, all the running animations of that group should be paused.

Richer syntax for animations

Animations very often consist of multiple moving graphics (or other animations) that are chained together. The current CSS animation model can't express this so people have to resort to JavaScript to get this effect. SMIL can theoretically do this, but it has implemented it backwards. The 'chaining' is done on the elements themselves which make. Instead the chain should be 1 definition that animates the elements in the right order.

An example syntax could look like this:

@keyframes sample
{
   from{
      :nth-child(1): {display: block;}
   }
   50%{
      :nth-child(1): {display: none;}
      :nth-child(2): {display: block;}
   } 
   to{
      :nth-child(2): {display: none;}
   }
}

You would apply this style to a group (ie

or <g>) that contains the content you want to animate. By default, the children that are not supposed to run at time 0 should have 'display: none' as the style. These children can be graphics or other groups.

When the style becomes active, it will make its children visible in the correct order. A chile that has an animation and that becomes visible, will also start running.