Auto-Animate

Introducing

Enable auto-animate
Duplicate the slide
Make changes

Automatically animate matching elements across slides.

Enable auto-animate
Duplicate the slide
Make changes

2s Ease

2s Back In & Out

2s Quint In & Out

1s Ease

1s Back Out

1s Quint In & Out

Fine-tune individual animations

2s Ease

2s Back In & Out

2s Quint In & Out

1s Ease

1s Back Out

1s Quint In & Out

Fine-tune individual animations

Enable auto-animate
Duplicate the slide
Make changes

Fine-tune individual animations

2s Ease

2s Back In & Out

2s Quint In & Out

1s Ease

1s Back Out

1s Quint In & Out

 /**
 * Initialize reveal.js.
 */
Reveal.initialize({
  controls: false,
  progress: false,
  viewDistance: 2,
  transition: 'none',
  postMessageEvents: true
})

Red
Green
Blue
Yellow
Azure
Navy
Ruby

Special auto-animations between matching lines of code and list items.

2s Ease

2s Back In & Out

2s Quint In & Out

1s Ease

1s Back Out

1s Quint In & Out

Fine-tune individual animations

 /**
 * Initialize reveal.js and monitor slide changes.
 */
Reveal.addEventListener('slidechanged', event => {
  
  let slide = Reveal.getCurrentSlide();
  
});
 
Reveal.initialize({
  ...
})

Special auto-animations between matching lines of code and list items.

Red
- Ruby
Green
Blue
Yellow
Azure
Navy

 /**
 * Initialize reveal.js and monitor slide changes.
 */
Reveal.addEventListener('slidechanged', event => {
  
  let slide = Reveal.getCurrentSlide();
  if( Reveal.isLastSlide() ) {
    slide.classList.add( 'outro' );
  }
 
});
 
Reveal.initialize({
  ...
}) /**
 * Initialize reveal.js and monitor slide changes.
 */
Reveal.addEventListener('slidechanged', event => {
  
  let slide = Reveal.getCurrentSlide();
  if( Reveal.isLastSlide() ) {
    slide.classList.add( 'outro' );
  }
 
});
 
Reveal.initialize({
  ...
}) /**
 * Initialize reveal.js and monitor slide changes.
 */
Reveal.addEventListener('slidechanged', event => {
  
  let slide = Reveal.getCurrentSlide();
  if( Reveal.isLastSlide() ) {
    slide.classList.add( 'outro' );
  }
 
});
 
Reveal.initialize({
  ...
})

Special auto-animations between matching lines of code and list items.

Red
- Ruby
Green
Blue
- Azure
- Navy
Yellow

Intuitive and powerful animation options.

 /**
 * Initialize reveal.js and monitor slide changes.
 */
Reveal.addEventListener('slidechanged', event => {
  
  let slide = Reveal.getCurrentSlide();
  if( Reveal.isLastSlide() ) {
    slide.classList.add( 'outro' );
  }
 
});
 
Reveal.initialize({
  ...
})

Special auto-animations between matching lines of code and list items.

Red
- Ruby
Green
Blue
- Azure
- Navy
Yellow

Auto-animate is available in public beta.

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

	/**
	* Initialize reveal.js.
	*/
	Reveal.initialize({
	controls: false,
	progress: false,
	viewDistance: 2,
	transition: 'none',
	postMessageEvents: true
	})

	/**
	* Initialize reveal.js and monitor slide changes.
	*/
	Reveal.addEventListener('slidechanged', event => {

	let slide = Reveal.getCurrentSlide();

	});

	Reveal.initialize({
	...
	})