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 Ko Ko Ye
Auto-Animate Code
We've added support for incredibly smooth animations between code blocks. See it in action in this deck!
