DaCSSlide Build Status

Port of JaCSS - tiny "framework" for building pure CSS3-animation based presentations.

Examples

Advanced usage:

Example

Example could be found in web folder.

In HTML file you need to speicfy "symbols":

<presentation slides="8" class="hidden">
      <symbol id="hello">
        Hello {{world}}
      </symbol>
      <symbol id="center">
        Center
      </symbol>
</presentation>

And in SCSS file you need to specify behaviour (Note: syntax below is using DACSSlide additions to SCSS):

#center {
  opacity:0;
}
.s2 {
  #hello: move(50,100);
   
  #center {
    background-color:red;
    opacity:1;
    ::up(20);
  }
}
.s3 {
  #hello:move(+100,+100);
}
...

Where .sN means behaviour for slide (keyframe) N.

Each symbol can have track property if it can change it's width or height (in case of asynchronously loaded symbols).

How to run

You can start webdev serve and open http://localhost:8080

Libraries

builder
pcss_builder
presentation_component
sample_directive