Animator Sample

fiddle.js

enyo.ready(function() {
    enyo.kind({
        name: 'Expando',
        components: [
            { name: 'expander', content: 'Presto',
              style: 
              'width: 100px; background-color: lightblue; text-align: center;' },
            { name: 'animator', kind: 'Animator', duration: 1500, startValue: 100,
              endValue: 300, onStep: 'expand', onEnd: 'done' },
            { kind: 'Button', content: 'Start', ontap: 'startAnimator' },
        ],
        startAnimator: function() {
            this.set('$.expander.content', 'Presto');
            this.$.animator.play();
        },
        expand: function(sender, event) {
            this.$.expander.applyStyle('width', Math.floor(sender.value) + 'px');
        },
        done: function() {
            this.set('$.expander.content', 'Change-o');
        }
    });

    new enyo.Application({name:'app', view: 'Expando'});
});

fiddle.manifest

name: Animator Sample
description: An example of using the Animator component
authors:
  - Roy Sutton
normalize_css: no