JS-in-CSS

@function

HTML for this deck


 <article>
  <header>
    <h1>Slide Title</h1>
  </header>
  <figure>
    slide content
  </figure>
 </article>

The actual <style>

Reload page when done.

Let's Animate this!

Comment this out to animate the deck

View progress timeline

See the Overflow example

Resources

This talk: estelle.github.io/JS-in-CSS
OpenWebDocs: OpenWebDocs.org
Scroll-driven animations: Scroll-driven animation timelines
CSS functions: CSS value functions and @function

Support the work of OpenWebDocs