aboutsummaryrefslogtreecommitdiff
path: root/README.md
diff options
context:
space:
mode:
authorHakim El Hattab <hakim.elhattab@gmail.com>2020-03-02 21:12:30 +0100
committerHakim El Hattab <hakim.elhattab@gmail.com>2020-03-02 21:12:30 +0100
commitcc0a2d0f9acf9868bdb7d2afc0021ad0e5fa1466 (patch)
tree012d8684f31f32383b8d92c8ac095c5217ab9af0 /README.md
parentca5032711ca59af9d42451a229e603f03fd3a9f6 (diff)
downloadfosdem-2021-minimalism-presentation-cc0a2d0f9acf9868bdb7d2afc0021ad0e5fa1466.tar
fosdem-2021-minimalism-presentation-cc0a2d0f9acf9868bdb7d2afc0021ad0e5fa1466.tar.gz
auto-animate docs
Diffstat (limited to 'README.md')
-rw-r--r--README.md8
1 files changed, 7 insertions, 1 deletions
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 `<section>`. 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 ) {