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
- 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({
...
})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 Scott Spence
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.)
