Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<body>
  <div id="target">Target element</div>
  
  <p>
    These buttons start additive rotation animations on the
    target element with slightly different inital keyframes.<br>
    This works in Firefox and Chrome with experimental web platform features enabled.
  </p>
  
  <p>
    <button id="rotateNone">none -> rotate(180deg)</button><br>
    Stacking multiple rotations from none on top of each other
    causes matrix interpolation to occur and the motion ends up
    getting stuck, going counter clockwise and sometimes
    even jumping around.<br>
    This behaviour is very non intuitive.
  </p>
  <p>
    <button id="rotate0deg">rotate(0deg) -> rotate(180deg)</button><br>
    Using 0deg in the initial keyframe avoids matrix interpolation
    and the motion of multiple rotations are stacked intuitively;
    never getting stuck, never going counter clockwise.
  </p>
  
  <p>
    These animations are intuitively the same but behave very
    differently under additive composition. This difference
    could be avoided if the composition algorithm for Web
    Animations performed interpolation before composition
    instead of after.<br>
    The non-intuitive behaviour comes from the fact that
    underlying values can affect interpolation behaviour.
  </p>
</body>
 
#target {
  width: 100px;
  height: 100px;
  border: solid;
  margin: 20px;
}
 
const timing = {
  duration: 2000,
  fill: 'forwards',
};
rotateNone.addEventListener('click', () => {
  target.animate([{
    transform: 'none',
    composite: 'add',
  }, {
    transform: 'rotate(180deg)',
    composite: 'add',
  }], timing);
});
rotate0deg.addEventListener('click', () => {
  target.animate([{
    transform: 'rotate(0deg)',
    composite: 'add',
  }, {
    transform: 'rotate(180deg)',
    composite: 'add',
  }], timing);
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers