Demo of ColorAnimate Behavior

Animating Color

Click Me!

Here's an example that fades & closes the image on the left when the user clicks on it. (It's live, so go ahead and try it!). The protoscript below says: for an element with id set to avatar, fade it out when the user clicks on it and close it when the fade completes. You can click here to restart the example.

$proto('#box-target', {
  Click: {
    onClick: {
      ColorAnimate: {
        backgroundColor: { from:'#fff', to: '#FEF59B' },
        borderTopColor: { from:'#2F6FAB', to: '#b3f' },
        borderLeftColor: { from:'#2F6FAB', to: '#b3f' },
        borderRightColor: { from:'#2F6FAB', to: '#b3f' },
        borderBottomColor: { from:'#2F6FAB', to: '#b3f' },
        duration: 0.5,
        onStart: {
          ColorAnimate: {
            target: "#box-target p",
            color: { from:'#000', to: '#888' }
          },
          Animate: {
            target: "#box-target p",
            fontSize: {to: 18, unit: 'px'}
          }
        }
      }
    }
  }
});

For a full description of this behavior see the ColorAnimate Documentation Page.

Demo of ColorAnimate Behavior

Animating Color

Behavior Demos