diff options
| author | Hakim El Hattab <hakim.elhattab@gmail.com> | 2020-05-19 10:22:19 +0200 |
|---|---|---|
| committer | Hakim El Hattab <hakim.elhattab@gmail.com> | 2020-05-19 10:22:24 +0200 |
| commit | 9d11927066330634744b370c64d2a4ddb438cb80 (patch) | |
| tree | d9a8fa195e38d59ac36c4713e86200f5ed38369a /demo.html | |
| parent | 815557c1d882a664d9d13cdc550d2ee6a5179ef0 (diff) | |
| download | fosdem-2021-minimalism-presentation-9d11927066330634744b370c64d2a4ddb438cb80.tar fosdem-2021-minimalism-presentation-9d11927066330634744b370c64d2a4ddb438cb80.tar.gz | |
auto-animate example in demo
Diffstat (limited to 'demo.html')
| -rw-r--r-- | demo.html | 26 |
1 files changed, 26 insertions, 0 deletions
@@ -137,6 +137,32 @@ </p> </section> + <section data-auto-animate data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)"> + <h2>Auto-Animate</h2> + <p>Automatically animate matching elements across slides with <a href="https://revealjs.netlify.app/auto-animate/">Auto-Animate</a>.</p> + <div class="r-hstack justify-center"> + <div data-id="box1" style="background: #999; width: 50px; height: 50px; margin: 10px; border-radius: 5px;"></div> + <div data-id="box2" style="background: #999; width: 50px; height: 50px; margin: 10px; border-radius: 5px;"></div> + <div data-id="box3" style="background: #999; width: 50px; height: 50px; margin: 10px; border-radius: 5px;"></div> + </div> + </section> + <section data-auto-animate data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)"> + <div class="r-hstack justify-center"> + <div data-id="box1" data-auto-animate-delay="0" style="background: cyan; width: 150px; height: 100px; margin: 10px;"></div> + <div data-id="box2" data-auto-animate-delay="0.1" style="background: magenta; width: 150px; height: 100px; margin: 10px;"></div> + <div data-id="box3" data-auto-animate-delay="0.2" style="background: yellow; width: 150px; height: 100px; margin: 10px;"></div> + </div> + <h2 style="margin-top: 20px;">Auto-Animate</h2> + </section> + <section data-auto-animate data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)"> + <div class="r-stack"> + <div data-id="box1" style="background: cyan; width: 300px; height: 300px; border-radius: 200px;"></div> + <div data-id="box2" style="background: magenta; width: 200px; height: 200px; border-radius: 200px;"></div> + <div data-id="box3" style="background: yellow; width: 100px; height: 100px; border-radius: 200px;"></div> + </div> + <h2 style="margin-top: 20px;">Auto-Animate</h2> + </section> + <section> <h2>Touch Optimized</h2> <p> |