Getting started with deck.js:
anim extension
use right arrow to move on

Nested deck.js slides

• Not an extension (in core deck.js)
• Just have an element with the “slide” class…
• … and it will appear (hit the right arrow now)
• Hey! I appeared! (go on)
• The gray-ish style is part of the theme

Show/Hide Elements

• Go beyond sequential appearance … like this!
• … for example
• Or hide stuff
• Let's get the title back, slowly :)

Add/Remove Classes

• We can also add/remove classes: like the “highlight”
• This is highlight by default (styled with css)
• We can add a class
• And remove it

Attribute Animations

• We can animate any attribute, like the color
• Let's try
• Or the size
• Or play multiple animations

Video Control

• Starts paused
• Plays on "next"
• Then pauses on "next"
• Then next slide

The “anim” extension

• Works in conjunction with
• “events”: extension that triggers events
     (notify the slide when it becomes current)
• “step”: extension that also trigger init events
     (knowing about toplevel vs nested slides)
• Uses open attributes "data-*" (see source)
• Adds animation classes
• anim-show/hide, anim-addclass/removeclass,
• anim-attribute, anim-play, anim-pause, …

Browser support

• Should be ok