diff options
author | Hakim El Hattab <hakim.elhattab@gmail.com> | 2020-03-02 21:12:30 +0100 |
---|---|---|
committer | Hakim El Hattab <hakim.elhattab@gmail.com> | 2020-03-02 21:12:30 +0100 |
commit | cc0a2d0f9acf9868bdb7d2afc0021ad0e5fa1466 (patch) | |
tree | 012d8684f31f32383b8d92c8ac095c5217ab9af0 /README.md | |
parent | ca5032711ca59af9d42451a229e603f03fd3a9f6 (diff) | |
download | fosdem-2021-minimalism-presentation-cc0a2d0f9acf9868bdb7d2afc0021ad0e5fa1466.tar fosdem-2021-minimalism-presentation-cc0a2d0f9acf9868bdb7d2afc0021ad0e5fa1466.tar.gz |
auto-animate docs
Diffstat (limited to 'README.md')
-rw-r--r-- | README.md | 8 |
1 files changed, 7 insertions, 1 deletions
@@ -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 ) { |