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.

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

support@slides.com