Auto-Animate

Introducing

Slide 1

Slide 2

Automatically animate matching elements across slides.

Automatically animate matching elements across slides.

Slide 1

Slide 2

Auto-Animate

Introducing

  1. Enable auto-animate
  2. Duplicate the slide
  3. Make changes

Automatically animate matching elements across slides.

  1. Enable auto-animate
  2. Duplicate the slide
  3. 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

  1. Enable auto-animate
  2. Duplicate the slide
  3. 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({
  ...
})

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

  • Red
    • Ruby
  • Green
  • Blue
    • Azure
    • Navy
  • Yellow

Intuitive and powerful animation options.

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.

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

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