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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/news/images/557226/slides-symbol-flat-1024x1024.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/3906600/collab-tile.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/3906598/collab-bubble.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/3906600/collab-tile.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/3906600/collab-tile.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/3906600/collab-tile.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/3906598/collab-bubble.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/3906598/collab-bubble.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/3906598/collab-bubble.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/3906600/collab-tile.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/3906600/collab-tile.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/3906598/collab-bubble.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/3906600/collab-tile.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/3906598/collab-bubble.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/3906598/collab-bubble.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/3906600/collab-tile.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/3906600/collab-tile.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/3906600/collab-tile.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/3906600/collab-tile.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/3906598/collab-bubble.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/news/images/557226/slides-symbol-flat-1024x1024.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/3906600/collab-tile.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/3906600/collab-tile.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/3906600/collab-tile.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/3906598/collab-bubble.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/3906598/collab-bubble.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/3906598/collab-bubble.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/3906600/collab-tile.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/3906600/collab-tile.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/3906598/collab-bubble.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/3906600/collab-tile.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/3906598/collab-bubble.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/3906598/collab-bubble.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/3906600/collab-tile.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/3906600/collab-tile.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/3906600/collab-tile.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/3906600/collab-tile.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/3906598/collab-bubble.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/news/images/557226/slides-symbol-flat-1024x1024.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/3906600/collab-tile.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/3906600/collab-tile.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/3906600/collab-tile.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/3906598/collab-bubble.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/3906598/collab-bubble.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/3906598/collab-bubble.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/3906600/collab-tile.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/3906600/collab-tile.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/3906598/collab-bubble.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/3906600/collab-tile.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/3906598/collab-bubble.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/3906598/collab-bubble.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/3906600/collab-tile.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/3906600/collab-tile.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/3906600/collab-tile.png)
Auto-Animate is available in public beta.
Log inΒ or sign up for free to try it out.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/7113753/collab-bubble.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/7113753/collab-bubble.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/7113753/collab-bubble.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/7113753/collab-bubble.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/7113753/collab-bubble.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/7113753/collab-bubble.png)
We'd love your feedback π€
support@slides.com
![](https://s3.amazonaws.com/media-p.slid.es/uploads/news/images/557226/slides-symbol-flat-1024x1024.png)
We'd love your feedback π€
support@slides.com
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/7113753/collab-bubble.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/7113753/collab-bubble.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/7113753/collab-bubble.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/7113753/collab-bubble.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/7113753/collab-bubble.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/32388/images/7113753/collab-bubble.png)
Copy of Auto-Animate Code
By lsantiago
Copy of Auto-Animate Code
We've added support for incredibly smooth animations between code blocks. See it in action in this deck!
- 38