From cc0a2d0f9acf9868bdb7d2afc0021ad0e5fa1466 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Mon, 2 Mar 2020 21:12:30 +0100 Subject: [PATCH] auto-animate docs --- README.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 780b66e..a759d29 100644 --- a/README.md +++ b/README.md @@ -629,7 +629,13 @@ Reveal.initialize({ }) ``` -#### Events +#### API: State Attributes and Events +We add state attributes to the different elements involved in an auto-animation. These attributes can be tied into if you want to, for example, fine-tune the animation behavior with custom CSS. + +Right before an auto-animation starts we add `data-auto-animate="pending"` to the slide `
`. At this point the upcoming slide is visible and all of the animated elements have been moved to their starting positions. Next we switch to `data-auto-animate="running"` to indicate when the elements start animating towards their final properties. + +Each individual element is decorated with a `data-auto-animate-target` attribute. The value of the attribute is a unique ID for this particular animation OR "unmatched" if this element should animate as unmatched content. + Each time a presentation navigates between two auto-animated slides it dispatches the `autoanimate` event. ```javascript Reveal.addEventListener( 'autoanimate', function( event ) {