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

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.

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

We'd love your feedback πŸ€™
support@slides.com

Auto-Animate Code

By Slides News

Auto-Animate Code

We've added support for incredibly smooth animations between code blocks. See it in action in this deck!

  • 15,898