Make your code shine with highlighting + Auto-Animate

/**
 * Get the intersection of two overlapping rectangles.
 * 
 * @returns {Object} Rectangle with x, y, width & height.
 */
function intersection( rectA, rectB ) {
  ...
}

Automatic animations between code

/**
 * Get the intersection of two overlapping rectangles.
 * 
 * @returns {Object} Rectangle with x, y, width & height.
 */
function intersection( rectA, rectB ) {
  ...
}

Reveal changes incrementally

Make your code shine with highlighting + Auto-Animate

/**
 * Get the intersection of two overlapping rectangles.
 * 
 * @returns {Object} Rectangle with x, y, width & height.
 */
function intersection( rectA, rectB ) {
  
  ...
  
  return {
    x: left,
    y: top,
    width: Math.max( 0, right - left ),
    height: Math.max( 0, bottom - top )
  };

}

Reveal changes incrementally

Automatic animations between code

/**
 * Get the intersection of two overlapping rectangles.
 * 
 * @returns {Object} Rectangle with x, y, width & height.
 */
function intersection( rectA, rectB ) {
  
  const left = Math.max( rectA.x, rectB.x );
  const top = Math.max( rectA.y, rectB.y );
  ...

  return {
    x: left,
    y: top,
    width: Math.max( 0, right - left ),
    height: Math.max( 0, bottom - top )
  };

}

Combine with line-highlights

/**
 * Get the intersection of two overlapping rectangles.
 * 
 * @returns {Object} Rectangle with x, y, width & height.
 */
function intersection( rectA, rectB ) {
  
  const left = Math.max( rectA.x, rectB.x );
  const top = Math.max( rectA.y, rectB.y );
  const right = Math.min( rectA.x + rectA.width, rectB.x + rectB.width );
  const bottom = Math.min( rectA.y + rectA.height, rectB.y + rectB.height );

  return {
    x: left,
    y: top,
    width: Math.max( 0, right - left ),
    height: Math.max( 0, bottom - top )
  };

}

Combine with line-highlights

Works with changes in position

/**
 * Make sweeping changes, we'll figure out the animation.
 */
function intersection( rectA, rectB ) {
  
  let unicorn = '🦄';
  let 🦄 = 'unicorn';
  return {
    🦄: 🦄
  };

}

Works with changes in position

maybe don't do this

or this

Combine with line-highlights

/**
 * Make sweeping changes, we'll figure out the animation.
 */
function intersection( rectA, rectB ) {
  
  let unicorn = '🦄';
  let 🦄 = 'unicorn';
  return {
    🦄: 🦄
  };

}

Sync with other animations

maybe don't do this

none of this even works

Auto-Animate is available in public beta.

/**
 * Make sweeping changes, we'll figure out the animation.
 */
function intersection( rectA, rectB ) {
  
  let unicorn = '🦄';
  let 🦄 = 'unicorn';
  return {
    🦄: 🦄
  };

}

Sync with other animations

maybe don't do this

none of this even works