In-Slide animations in deck.js

1. Use right arrow (or space) to DO a step

2. Use left arrow (or backspace) to UNDO a step

3. (optional) Type 's' to disable scaling

Making things appear and disappear

• Point 1

  this is ok

• Point 2

  this is awesome

• Point 3

  this is cool

     function(slide) {
       var a = $[deck]("animate", slide);
       $[deck]('addAnimationSequence', slide, [
         a.appear(".comment1", 700),
         a.appear(".comment2", 700),
         a.appear(".comment3", 500),
         [a.disappear(".comment1", 500), a.disappear(".comment3", 900)]
       ]);
     }
    

Animating attributes (opacity here)

• Idea 1

  this is ok

• Idea 2 next step with delays

  this is awesome

• Idea 3

  this is still cool

     function(slide) {
       var a = $[deck]("animate", slide);
       $[deck]('addAnimationSequence', slide, [
         [a.appear(".comment1", 500), a.appear(".comment2", 900), a.appear(".comment3", 700)],
         a.animate(".comment3", "opacity", .4, 400),
         a.animate(".comment1", "opacity", .2, 400),
         a.appear(".withdelay", 500),
         // here there is a bug in the undo (needs to be fixed)
         [a.animate(".comment1,.comment2,.comment3", "opacity", 1, 800), a.withDelay(900, a.animate(".comment1,.comment3", "opacity", 0, 500))]
       ]);
     }
    

Animating Colors (e.g., Highlighting)

• Point 1

  this is ok

• Point 2

  this is awesome

• Point 3

  this is still cool

     function(slide) {
       var a = $[deck]("animate", slide);
       $[deck]('addAnimationSequence', slide, [
         a.animate(".comment1", "color", "#00FF00", 800),
         [a.animate(".comment2", "color", "#00FF00", 800), a.animate(".comment1", "color", "#444", 1200)],
         [a.animate(".comment3", "color", "#00FF00", 800), a.animate(".comment2", "color", "#444", 1200)],
         [a.animate(".comment2", "color", "#00FF00", 800), a.animate(".comment3", "color", "#444", 1200)],
         // here also, back is buggous (need to patch the core deck.js)
         a.animate(".awesome", "color", "#FF0000", 800)
       ]);
     }
    

Adding Classes (e.g., Highlighting also)

function(slide) {
  var a = $[deck]("animate", slide);
  $[deck]('addAnimationSequence', slide, [
    a.appear(".comment1", 800),
    a.addClass(".awesome", "highlightInRed"),
    a.appear(".comment2", 800),
    a.removeClass(".awesome", "highlightInRed"),
    a.appear(".comment3", 800),
    [a.addClass("pre.animate", "showAnyway"),
     a.addClass(".awesome", "highlightInRed")]
  ]);
}
    

• Step 1: awesome

  add a class (highlight in red)

• Step 2

  and remove it

• Step 3

  show the hidden animation code (using a dedicated 'showAnyway' class)

Digging Deeper

If you want to learn more

• view this page source (Ctrl+U?)
• see also the SVG animations example
• see also the simpler syntax example
• see also the math example
• see my page on deck.js and contact me

Done