PREV NEXT

Box Shadow

The shadow property adds drop shadows and inset shadows to an item’s bounding box. The first story simply adds one shadow and then removes it. By default, the inset value is false, so it will be a drop shadow.

Inset Shadow

The second story, which can be seen by clicking the button labeled 2 underneath the editor, switches back and forth between a box shadow and an inset shadow. It toggles between eases with "out" and "in" directions so the transition between drop and inset is smooth.

Note that the final action doesn’t just set the shadow property to false. This is because false would set the inset value to false and not animate it.

story = {
  item:{
    text:"Shadow",
    init: { font:25, padding:true, corners:true },
    actions:[
      { anim:1, shadow:[2,2,7,"#234"] },
      { anim:1, shadow:false }
    ]
  }
};

story = {
  item:{
    text:"Shadow",
    init: { font:25, padding:true, corners:true },
    actions:[
      {
        anim:[1,"less curve"],
        shadow:[1,1,5,"#234"] },
      {
        anim:[1,"less curve in"],
        shadow:false },
      {
        anim:[1,"less curve"],
        shadow:[1,1,5,"#234",0,true] },
      {
        anim:[1,"less curve in"],
        shadow:[0,0,0,"#000",0,true] }
    ]
  }
};