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

Copy of Auto-Animate

By jonhilt

Copy of Auto-Animate

Introducing Auto-Animate: an all new way to create stunning animations in Slides! Learn all about it and view some examples in this deck. (Currently in public beta—let us know if you have any feedback.)

  • 449