Using SVG Animations in Deck.js

1. NB: Firefox may complain about missing plugins, ignore it

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

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

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

Making elements appear one by one

     function(slide) {
       var a = $[deck]("svgAnimate", slide, ".svg1");
       $[deck]('addAnimationSequence', slide, [
         a.appear("#circleRed", 1200),
         a.appear("#circleBlue", 300),
         a.appear("#circleGreen", 400)
       ]);
       /* equivalent to:
       $[deck]('addAnimation', slide, a.appear("#circleRed", 1200));
       $[deck]('addAnimation', slide, a.appear("#circleBlue", 300));
       $[deck]('addAnimation', slide, a.appear("#circleGreen", 400));
       */
     }
    

And now, for more advanced stuffs

Interleaved animations (between two SVG images)

     function(slide) {
       var a1 = $[deck]("svgAnimate", slide, ".svg1");
       var a2 = $[deck]("svgAnimate", slide, ".svg2");
       $[deck]('addAnimationSequence', slide, [
         a1.appear("#circleRed", 200),
         a2.appear("#circleBlue", 300),
         a1.appear("#circleGreen", 400),
         a2.appear("#circleGreen", 300),
         a1.appear("#circleBlue", 400)
       ]);
     }
    

Multiple animations per step

     function(slide) {
     var a = $[deck]("svgAnimate", slide, ".svg1");
       $[deck]("addAnimationSequence", slide, [
         a.appear("#circleBlue, #circleGreen", 600),
         a.disappear("#circleBlue, #circleGreen", 900),
         [a.appear("#circleRed", 1200), a.appear("#circleBlue", 300)], // for finer control (e.g., different durations)
         [a.disappear("#circleRed", 300), a.disappear("#circleBlue", 900)],
         a.and(a.appear("#circleGreen", 400), a.appear("#circleRed", 400)), // useless to use "and" (see above for alternatives)
         a.disappear("#circleRed, #circleGreen", 100),
         [a.appear("#circleBlue", 1000), a.withDelay(1000, a.appear("#circleRed, #circleGreen", 300))]
       ]);
     }
    

Even fancier: animating “viewBox”

     function(slide) {
     var a = $[deck]("svgAnimate", slide, ".svg1");
       $[deck]("addAnimationSequence", slide, [
         a.appear("#circleBlue, #circleGreen, #circleRed", 600),
         a.viewBox("320, 320, 100, 100", 1000),
         a.viewBox("200, 200, 100, 100", 1000),
         a.viewBox("-200, -200, 1000, 1000", 1000),
         a.viewBox("100, 104.8, 17, 17", 1000), // 100,363 -> 117, 347   //h=467.8
         a.viewBox("-2000, -2000, 4000, 4000", 1000)
       ]);
     }
    

Digging Deeper

If you want to learn more

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

Done