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 )
  };
 
} /**
 * 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.

Log in or sign up for free to try it out.

 /**
 * 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.

Log in or sign up for free to try it out.

We'd love your feedback 🤙
support@slides.com

Make your code shine with highlighting + Auto-Animate

Make your code shine with highlighting + Auto-Animate

Auto-Animate Code

Auto-Animate Code

Slides News PRO

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

	/**
	* Make sweeping changes, we'll figure out the animation.
	*/
	function intersection( rectA, rectB ) {

	let unicorn = '🦄';
	let 🦄 = 'unicorn';
	return {
	🦄: 🦄
	};

	}

Make your code shine with highlighting + Auto-Animate

Auto-Animate Code

More from Slides News